diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/test/core/Ticker.js b/test/core/Ticker.js index 188770f..7154220 100644 --- a/test/core/Ticker.js +++ b/test/core/Ticker.js @@ -150,6 +150,56 @@ expect(this.length()).to.equal(length); }); + it('should call when adding same priority', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1) + .add(listener2) + .add(listener3); + + shared.update(); + + expect(this.length()).to.equal(length + 3); + + sinon.assert.callOrder(listener1, listener2, listener3); + + shared.remove(listener1) + .remove(listener2) + .remove(listener3); + + expect(this.length()).to.equal(length); + }); + + it('should remove once listener in a stack', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1, null, PIXI.UPDATE_PRIORITY.HIGH); + shared.addOnce(listener2, null, PIXI.UPDATE_PRIORITY.NORMAL); + shared.add(listener3, null, PIXI.UPDATE_PRIORITY.LOW); + + shared.update(); + + expect(this.length()).to.equal(length + 2); + + shared.update(); + + expect(listener1.calledTwice).to.be.true; + expect(listener2.calledOnce).to.be.true; + expect(listener3.calledTwice).to.be.true; + + shared.remove(listener1).remove(listener3); + + expect(this.length()).to.equal(length); + }); + it('should call inserted item with a lower priority', function () { const length = this.length(); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/test/core/Ticker.js b/test/core/Ticker.js index 188770f..7154220 100644 --- a/test/core/Ticker.js +++ b/test/core/Ticker.js @@ -150,6 +150,56 @@ expect(this.length()).to.equal(length); }); + it('should call when adding same priority', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1) + .add(listener2) + .add(listener3); + + shared.update(); + + expect(this.length()).to.equal(length + 3); + + sinon.assert.callOrder(listener1, listener2, listener3); + + shared.remove(listener1) + .remove(listener2) + .remove(listener3); + + expect(this.length()).to.equal(length); + }); + + it('should remove once listener in a stack', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1, null, PIXI.UPDATE_PRIORITY.HIGH); + shared.addOnce(listener2, null, PIXI.UPDATE_PRIORITY.NORMAL); + shared.add(listener3, null, PIXI.UPDATE_PRIORITY.LOW); + + shared.update(); + + expect(this.length()).to.equal(length + 2); + + shared.update(); + + expect(listener1.calledTwice).to.be.true; + expect(listener2.calledOnce).to.be.true; + expect(listener3.calledTwice).to.be.true; + + shared.remove(listener1).remove(listener3); + + expect(this.length()).to.equal(length); + }); + it('should call inserted item with a lower priority', function () { const length = this.length(); diff --git a/test/core/TilingSprite.js b/test/core/TilingSprite.js index 7694792..0b6c87f 100644 --- a/test/core/TilingSprite.js +++ b/test/core/TilingSprite.js @@ -30,7 +30,9 @@ const texture = new PIXI.Texture(new PIXI.BaseTexture()); const tilingSprite = new PIXI.extras.TilingSprite(texture, 200, 300); - expect(tilingSprite.containsPoint(new PIXI.Point(1, 1))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(0, 0))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(10, 10))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(200, 300))).to.equal(false); expect(tilingSprite.containsPoint(new PIXI.Point(300, 400))).to.equal(false); }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/test/core/Ticker.js b/test/core/Ticker.js index 188770f..7154220 100644 --- a/test/core/Ticker.js +++ b/test/core/Ticker.js @@ -150,6 +150,56 @@ expect(this.length()).to.equal(length); }); + it('should call when adding same priority', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1) + .add(listener2) + .add(listener3); + + shared.update(); + + expect(this.length()).to.equal(length + 3); + + sinon.assert.callOrder(listener1, listener2, listener3); + + shared.remove(listener1) + .remove(listener2) + .remove(listener3); + + expect(this.length()).to.equal(length); + }); + + it('should remove once listener in a stack', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1, null, PIXI.UPDATE_PRIORITY.HIGH); + shared.addOnce(listener2, null, PIXI.UPDATE_PRIORITY.NORMAL); + shared.add(listener3, null, PIXI.UPDATE_PRIORITY.LOW); + + shared.update(); + + expect(this.length()).to.equal(length + 2); + + shared.update(); + + expect(listener1.calledTwice).to.be.true; + expect(listener2.calledOnce).to.be.true; + expect(listener3.calledTwice).to.be.true; + + shared.remove(listener1).remove(listener3); + + expect(this.length()).to.equal(length); + }); + it('should call inserted item with a lower priority', function () { const length = this.length(); diff --git a/test/core/TilingSprite.js b/test/core/TilingSprite.js index 7694792..0b6c87f 100644 --- a/test/core/TilingSprite.js +++ b/test/core/TilingSprite.js @@ -30,7 +30,9 @@ const texture = new PIXI.Texture(new PIXI.BaseTexture()); const tilingSprite = new PIXI.extras.TilingSprite(texture, 200, 300); - expect(tilingSprite.containsPoint(new PIXI.Point(1, 1))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(0, 0))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(10, 10))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(200, 300))).to.equal(false); expect(tilingSprite.containsPoint(new PIXI.Point(300, 400))).to.equal(false); }); diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js index a5bf69d..dd1c6d8 100644 --- a/test/core/WebGLRenderer.js +++ b/test/core/WebGLRenderer.js @@ -18,4 +18,18 @@ renderer.destroy(); } })); + + it('should allow clear() to work despite no containers added to the renderer', withGL(function () + { + const renderer = new PIXI.WebGLRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + })); }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/test/core/Ticker.js b/test/core/Ticker.js index 188770f..7154220 100644 --- a/test/core/Ticker.js +++ b/test/core/Ticker.js @@ -150,6 +150,56 @@ expect(this.length()).to.equal(length); }); + it('should call when adding same priority', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1) + .add(listener2) + .add(listener3); + + shared.update(); + + expect(this.length()).to.equal(length + 3); + + sinon.assert.callOrder(listener1, listener2, listener3); + + shared.remove(listener1) + .remove(listener2) + .remove(listener3); + + expect(this.length()).to.equal(length); + }); + + it('should remove once listener in a stack', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1, null, PIXI.UPDATE_PRIORITY.HIGH); + shared.addOnce(listener2, null, PIXI.UPDATE_PRIORITY.NORMAL); + shared.add(listener3, null, PIXI.UPDATE_PRIORITY.LOW); + + shared.update(); + + expect(this.length()).to.equal(length + 2); + + shared.update(); + + expect(listener1.calledTwice).to.be.true; + expect(listener2.calledOnce).to.be.true; + expect(listener3.calledTwice).to.be.true; + + shared.remove(listener1).remove(listener3); + + expect(this.length()).to.equal(length); + }); + it('should call inserted item with a lower priority', function () { const length = this.length(); diff --git a/test/core/TilingSprite.js b/test/core/TilingSprite.js index 7694792..0b6c87f 100644 --- a/test/core/TilingSprite.js +++ b/test/core/TilingSprite.js @@ -30,7 +30,9 @@ const texture = new PIXI.Texture(new PIXI.BaseTexture()); const tilingSprite = new PIXI.extras.TilingSprite(texture, 200, 300); - expect(tilingSprite.containsPoint(new PIXI.Point(1, 1))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(0, 0))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(10, 10))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(200, 300))).to.equal(false); expect(tilingSprite.containsPoint(new PIXI.Point(300, 400))).to.equal(false); }); diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js index a5bf69d..dd1c6d8 100644 --- a/test/core/WebGLRenderer.js +++ b/test/core/WebGLRenderer.js @@ -18,4 +18,18 @@ renderer.destroy(); } })); + + it('should allow clear() to work despite no containers added to the renderer', withGL(function () + { + const renderer = new PIXI.WebGLRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + })); }); diff --git a/test/core/index.js b/test/core/index.js index 28636ab..2138e7b 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -25,6 +25,7 @@ require('./Circle'); require('./Graphics'); require('./SpriteRenderer'); +require('./CanvasRenderer'); require('./WebGLRenderer'); require('./Ellipse'); require('./BaseTexture'); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/test/core/Ticker.js b/test/core/Ticker.js index 188770f..7154220 100644 --- a/test/core/Ticker.js +++ b/test/core/Ticker.js @@ -150,6 +150,56 @@ expect(this.length()).to.equal(length); }); + it('should call when adding same priority', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1) + .add(listener2) + .add(listener3); + + shared.update(); + + expect(this.length()).to.equal(length + 3); + + sinon.assert.callOrder(listener1, listener2, listener3); + + shared.remove(listener1) + .remove(listener2) + .remove(listener3); + + expect(this.length()).to.equal(length); + }); + + it('should remove once listener in a stack', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1, null, PIXI.UPDATE_PRIORITY.HIGH); + shared.addOnce(listener2, null, PIXI.UPDATE_PRIORITY.NORMAL); + shared.add(listener3, null, PIXI.UPDATE_PRIORITY.LOW); + + shared.update(); + + expect(this.length()).to.equal(length + 2); + + shared.update(); + + expect(listener1.calledTwice).to.be.true; + expect(listener2.calledOnce).to.be.true; + expect(listener3.calledTwice).to.be.true; + + shared.remove(listener1).remove(listener3); + + expect(this.length()).to.equal(length); + }); + it('should call inserted item with a lower priority', function () { const length = this.length(); diff --git a/test/core/TilingSprite.js b/test/core/TilingSprite.js index 7694792..0b6c87f 100644 --- a/test/core/TilingSprite.js +++ b/test/core/TilingSprite.js @@ -30,7 +30,9 @@ const texture = new PIXI.Texture(new PIXI.BaseTexture()); const tilingSprite = new PIXI.extras.TilingSprite(texture, 200, 300); - expect(tilingSprite.containsPoint(new PIXI.Point(1, 1))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(0, 0))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(10, 10))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(200, 300))).to.equal(false); expect(tilingSprite.containsPoint(new PIXI.Point(300, 400))).to.equal(false); }); diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js index a5bf69d..dd1c6d8 100644 --- a/test/core/WebGLRenderer.js +++ b/test/core/WebGLRenderer.js @@ -18,4 +18,18 @@ renderer.destroy(); } })); + + it('should allow clear() to work despite no containers added to the renderer', withGL(function () + { + const renderer = new PIXI.WebGLRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + })); }); diff --git a/test/core/index.js b/test/core/index.js index 28636ab..2138e7b 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -25,6 +25,7 @@ require('./Circle'); require('./Graphics'); require('./SpriteRenderer'); +require('./CanvasRenderer'); require('./WebGLRenderer'); require('./Ellipse'); require('./BaseTexture'); diff --git a/test/core/util.js b/test/core/util.js index 239aaeb..68c7e6d 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -280,39 +280,9 @@ describe('.removeItems', function () { - var arr; - - beforeEach(() => + it('should exist', function () { - arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; - }); - - it('should return if the start index is greater than or equal to the length of the array', function () - { - PIXI.utils.removeItems(arr, arr.length + 1, 5); - expect(arr.length).to.be.equal(10); - }); - - it('should return if the remove count is 0', function () - { - PIXI.utils.removeItems(arr, 2, 0); - expect(arr.length).to.be.equal(10); - }); - - it('should remove the number of elements specified from the array, starting from the start index', function () - { - const res = [1, 2, 3, 8, 9, 10]; - - PIXI.utils.removeItems(arr, 3, 4); - expect(arr).to.be.deep.equal(res); - }); - - it('should remove other elements if delete count is > than the number of elements after start index', function () - { - const res = [1, 2, 3, 4, 5, 6, 7]; - - PIXI.utils.removeItems(arr, 7, 10); - expect(arr).to.be.deep.equal(res); + expect(PIXI.utils.removeItems).to.be.a('function'); }); }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/test/core/Ticker.js b/test/core/Ticker.js index 188770f..7154220 100644 --- a/test/core/Ticker.js +++ b/test/core/Ticker.js @@ -150,6 +150,56 @@ expect(this.length()).to.equal(length); }); + it('should call when adding same priority', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1) + .add(listener2) + .add(listener3); + + shared.update(); + + expect(this.length()).to.equal(length + 3); + + sinon.assert.callOrder(listener1, listener2, listener3); + + shared.remove(listener1) + .remove(listener2) + .remove(listener3); + + expect(this.length()).to.equal(length); + }); + + it('should remove once listener in a stack', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1, null, PIXI.UPDATE_PRIORITY.HIGH); + shared.addOnce(listener2, null, PIXI.UPDATE_PRIORITY.NORMAL); + shared.add(listener3, null, PIXI.UPDATE_PRIORITY.LOW); + + shared.update(); + + expect(this.length()).to.equal(length + 2); + + shared.update(); + + expect(listener1.calledTwice).to.be.true; + expect(listener2.calledOnce).to.be.true; + expect(listener3.calledTwice).to.be.true; + + shared.remove(listener1).remove(listener3); + + expect(this.length()).to.equal(length); + }); + it('should call inserted item with a lower priority', function () { const length = this.length(); diff --git a/test/core/TilingSprite.js b/test/core/TilingSprite.js index 7694792..0b6c87f 100644 --- a/test/core/TilingSprite.js +++ b/test/core/TilingSprite.js @@ -30,7 +30,9 @@ const texture = new PIXI.Texture(new PIXI.BaseTexture()); const tilingSprite = new PIXI.extras.TilingSprite(texture, 200, 300); - expect(tilingSprite.containsPoint(new PIXI.Point(1, 1))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(0, 0))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(10, 10))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(200, 300))).to.equal(false); expect(tilingSprite.containsPoint(new PIXI.Point(300, 400))).to.equal(false); }); diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js index a5bf69d..dd1c6d8 100644 --- a/test/core/WebGLRenderer.js +++ b/test/core/WebGLRenderer.js @@ -18,4 +18,18 @@ renderer.destroy(); } })); + + it('should allow clear() to work despite no containers added to the renderer', withGL(function () + { + const renderer = new PIXI.WebGLRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + })); }); diff --git a/test/core/index.js b/test/core/index.js index 28636ab..2138e7b 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -25,6 +25,7 @@ require('./Circle'); require('./Graphics'); require('./SpriteRenderer'); +require('./CanvasRenderer'); require('./WebGLRenderer'); require('./Ellipse'); require('./BaseTexture'); diff --git a/test/core/util.js b/test/core/util.js index 239aaeb..68c7e6d 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -280,39 +280,9 @@ describe('.removeItems', function () { - var arr; - - beforeEach(() => + it('should exist', function () { - arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; - }); - - it('should return if the start index is greater than or equal to the length of the array', function () - { - PIXI.utils.removeItems(arr, arr.length + 1, 5); - expect(arr.length).to.be.equal(10); - }); - - it('should return if the remove count is 0', function () - { - PIXI.utils.removeItems(arr, 2, 0); - expect(arr.length).to.be.equal(10); - }); - - it('should remove the number of elements specified from the array, starting from the start index', function () - { - const res = [1, 2, 3, 8, 9, 10]; - - PIXI.utils.removeItems(arr, 3, 4); - expect(arr).to.be.deep.equal(res); - }); - - it('should remove other elements if delete count is > than the number of elements after start index', function () - { - const res = [1, 2, 3, 4, 5, 6, 7]; - - PIXI.utils.removeItems(arr, 7, 10); - expect(arr).to.be.deep.equal(res); + expect(PIXI.utils.removeItems).to.be.a('function'); }); }); diff --git a/test/interaction/InteractionManager.js b/test/interaction/InteractionManager.js index 31385b9..3f84d6a 100644 --- a/test/interaction/InteractionManager.js +++ b/test/interaction/InteractionManager.js @@ -71,6 +71,25 @@ expect(eventSpy).to.have.been.called; }); + it('should call mouseupoutside handler on mouseup on different elements', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mouseupoutside', eventSpy); + + pointer.mousedown(10, 10); + pointer.mouseup(10, 10, false); + + expect(eventSpy).to.have.been.called; + }); + it('should call mouseover handler', function () { const stage = new PIXI.Container(); @@ -109,6 +128,95 @@ }); }); + describe('touch vs pointer', function () + { + it('should call touchstart and pointerdown when touch event and pointer supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10); + + expect(touchSpy).to.have.been.calledOnce; + expect(pointerSpy).to.have.been.calledOnce; + }); + + it('should not call touchstart or pointerdown when pointer event and touch supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10, 0, true); + + expect(touchSpy).to.not.have.been.called; + expect(pointerSpy).to.not.have.been.called; + }); + + it('should call touchstart and pointerdown when touch event and pointer not supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, false); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10); + + expect(touchSpy).to.have.been.calledOnce; + expect(pointerSpy).to.have.been.calledOnce; + }); + + it('should call touchstart and pointerdown when pointer event and touch not supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + pointer.interaction.supportsTouchEvents = false; + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10, 0, true); + + expect(touchSpy).to.have.been.calledOnce; + expect(pointerSpy).to.have.been.calledOnce; + }); + }); + describe('add/remove events', function () { let stub; @@ -264,7 +372,7 @@ expect(element.removeEventListener).to.have.been.calledWith('mouseover'); }); - it('should add and remove touch events to element', function () + it('should add and remove touch events to element without pointer events', function () { const manager = new PIXI.interaction.InteractionManager(sinon.stub()); const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() }; @@ -287,6 +395,30 @@ expect(element.removeEventListener).to.have.been.calledWith('touchend'); expect(element.removeEventListener).to.have.been.calledWith('touchmove'); }); + + it('should add and remove touch events to element with pointer events', function () + { + const manager = new PIXI.interaction.InteractionManager(sinon.stub()); + const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() }; + + manager.interactionDOMElement = element; + manager.supportsPointerEvents = true; + manager.supportsTouchEvents = true; + + manager.addEvents(); + + expect(element.addEventListener).to.have.been.calledWith('touchstart'); + expect(element.addEventListener).to.have.been.calledWith('touchcancel'); + expect(element.addEventListener).to.have.been.calledWith('touchend'); + expect(element.addEventListener).to.have.been.calledWith('touchmove'); + + manager.removeEvents(); + + expect(element.removeEventListener).to.have.been.calledWith('touchstart'); + expect(element.removeEventListener).to.have.been.calledWith('touchcancel'); + expect(element.removeEventListener).to.have.been.calledWith('touchend'); + expect(element.removeEventListener).to.have.been.calledWith('touchmove'); + }); }); describe('onClick', function () @@ -1062,7 +1194,7 @@ expect(pointer.renderer.view.style.display).to.equal('none'); }); - it('should not change cursor style if no cursor style provided', function () + it('should not change cursor style if null cursor style provided', function () { const stage = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -1082,6 +1214,22 @@ pointer.mousemove(60, 60); expect(pointer.renderer.view.style.cursor).to.equal(''); }); + + it('should use cursor property as css if no style entry', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const pointer = this.pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.cursor = 'text'; + + pointer.mousemove(10, 10); + expect(pointer.renderer.view.style.cursor).to.equal('text'); + }); }); describe('recursive hitTesting', function () @@ -1279,4 +1427,91 @@ expect(hit).to.equal(behind); }); }); + + describe('InteractionData properties', function () + { + it('isPrimary should be set for first touch only', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const pointer = this.pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + + pointer.touchstart(10, 10, 1); + expect(pointer.interaction.activeInteractionData[1]).to.exist; + expect(pointer.interaction.activeInteractionData[1].isPrimary, + 'first touch should be primary on touch start').to.be.true; + pointer.touchstart(13, 9, 2); + expect(pointer.interaction.activeInteractionData[2].isPrimary, + 'second touch should not be primary').to.be.false; + pointer.touchmove(10, 20, 1); + expect(pointer.interaction.activeInteractionData[1].isPrimary, + 'first touch should still be primary after move').to.be.true; + pointer.touchend(10, 10, 1); + pointer.touchmove(13, 29, 2); + expect(pointer.interaction.activeInteractionData[2].isPrimary, + 'second touch should still not be primary after first is done').to.be.false; + }); + }); + + describe('mouse events from pens', function () + { + it('should call mousedown handler', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mousedown', eventSpy); + + pointer.pendown(10, 10); + + expect(eventSpy).to.have.been.calledOnce; + }); + + it('should call mousemove handler', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mousemove', eventSpy); + + pointer.penmove(10, 10); + + expect(eventSpy).to.have.been.calledOnce; + }); + + it('should call mouseup handler', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mouseup', eventSpy); + + pointer.penup(10, 10); + + expect(eventSpy).to.have.been.calledOnce; + }); + }); }); diff --git a/.travis.yml b/.travis.yml index 14de334..c4135cb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,8 +25,7 @@ - Xvfb :99 -screen 0 1024x768x24 -extension RANDR & script: - - npm run build - - xvfb-maybe npm run coverage + - xvfb-maybe npm test - npm run docs deploy: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6743eef..d791c16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ # How to contribute -It is essential to the development of pixi.js that the community is empowered +It is essential to the development of PixiJS that the community is empowered to make changes and get them into the library. Here are some guidelines to make that process silky smooth for all involved. ## Reporting issues To report a bug, request a feature, or even ask a question, make use of the GitHub Issues -section for [pixi.js][issues]. When submitting an issue please take the following steps: +section for [PixiJS][issues]. When submitting an issue please take the following steps: 1. **Seach for existing issues.** Your question or bug may have already been answered or fixed, be sure to search the issues first before putting in a duplicate issue. @@ -30,11 +30,11 @@ 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because pixi uses modern JS features, you will need a modern version of node. v4+ is recommended. -2. Fork the [pixi.js][pixi] repository, if you are unsure how to do this GitHub has a guides +2. Fork the **[pixi.js][pixi]** repository, if you are unsure how to do this GitHub has a guides for the [command line][fork-cli] and for the [GitHub Client][fork-gui]. 3. Next, run `npm install` from within your clone of your fork. That will install dependencies -necessary to build pixi.js +necessary to build PixiJS. ### Making a Change @@ -54,14 +54,14 @@ ### Testing Your Change -You can test your change by using the automated tests packaged with pixi.js. You can run these tests +You can test your change by using the automated tests packaged with PixiJS. You can run these tests by running `npm test` from the command line. If you fix a bug please add a test that will catch that bug if it ever happens again. This prevents regressions from sneaking in. ### Submitting Your Change After you have made and tested your change, commit and push it to your fork. Then, open a Pull Request -from your fork to the main pixi.js repository on the branch you used in the `Making a Change` section of this document. +from your fork to the main **pixi.js** repository on the branch you used in the `Making a Change` section of this document. ## Quickie Code Style Guide diff --git a/LICENSE b/LICENSE index 7ca4d7c..d9de993 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ -The Pixi License +The MIT License -Copyright (c) 2013-2016 Mathew Groves, Chad Engler +Copyright (c) 2013-2017 Mathew Groves, Chad Engler Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3b85f85..00d8e3b 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,50 @@ -Pixi.js — A 2D JavaScript Renderer +PixiJS — The HTML5 Creation Engine ============= ![pixi.js logo](http://www.goodboydigital.com/pixijs/pixiV4_wide_full.jpg) - - - -[![Inline docs](http://inch-ci.org/github/GoodBoyDigital/pixi.js.svg?branch=dev)](http://inch-ci.org/github/GoodBoyDigital/pixi.js) +[![Inline docs](http://inch-ci.org/github/pixijs/pixi.js.svg?branch=dev)](http://inch-ci.org/github/pixijs/pixi.js) [![Build Status](https://travis-ci.org/pixijs/pixi.js.svg?branch=dev)](https://travis-ci.org/pixijs/pixi.js) The aim of this project is to provide a fast lightweight 2D library that works -across all devices. The Pixi renderer allows everyone to enjoy the power of +across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. -If you want to keep up to date with the latest pixi.js news then feel free to follow us on twitter +If you want to keep up to date with the latest PixiJS news then feel free to follow us on twitter ([@doormat23](https://twitter.com/doormat23), [@rolnaaba](https://twitter.com/rolnaaba), [@bigtimebuddy](https://twitter.com/bigtimebuddy), [@ivanpopelyshev](https://twitter.com/ivanpopelyshev)) -and we will keep you posted! You can also check back on [our site](http://www.goodboydigital.com/blog) +and we will keep you posted! You can also check back on [our site](http://www.pixijs.com) as any breakthroughs will be posted up there too! -**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!** +**Your support helps us make PixiJS even better. Make your pledge on [Patreon](https://www.patreon.com/user?u=2384552&ty=h&u=2384552) and we'll love you forever!** -### What to Use Pixi.js for and When to Use It +### What to Use PixiJS 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. +PixiJS 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 degradation 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! +PixiJS 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, PixiJS 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 degradation 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 PixiJS magic! **Boost your development and feel free to use your imagination!** ### Learn ### -- Website: Find out more about Pixi on the [offical website](http://www.pixijs.com/). +- Website: Find out more about PixiJS on the [offical website](http://www.pixijs.com/). - Getting started: Check out @kittykatattack's comprehensive [tutorial](https://github.com/kittykatattack/learningPixi). -- Examples: Get stuck right in and play around with pixi code and features right [here](http://pixijs.github.io/examples/)! -- Docs: Get to know the Pixi API by checking out the [docs](https://pixijs.github.io/docs/). -- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki/Resources). +- Examples: Get stuck right in and play around with PixiJS code and features right [here](http://pixijs.github.io/examples/)! +- Docs: Get to know the PixiJS API by checking out the [docs](https://pixijs.github.io/docs/). +- Wiki: Other misc tutorials and resources are [on the Wiki](https://github.com/pixijs/pixi.js/wiki). ### Community ### - Forums: Check out the [forum](http://www.html5gamedevs.com/forum/15-pixijs/) and [Stackoverflow](http://stackoverflow.com/search?q=pixi.js), both friendly places to ask your pixi questions. - Inspiration: Check out the [gallery](http://www.pixijs.com/gallery) to see some of the amazing things people have created! -- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about Pixi. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. +- Chat: You can join us on [Gitter](https://gitter.im/pixijs/pixi.js) To chat about PixiJS. We also now have a Slack channel. If you would like to join it please Send me an email (mat@goodboydigital.com) and I will invite you in. ### Setup ### -It's easy to get started with Pixi.js! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! +It's easy to get started with PixiJS! Simply download a [prebuilt build](https://github.com/pixijs/pixi.js/wiki/FAQs#where-can-i-get-a-build)! -Alternatively, Pixi.js can be installed with [Bower](https://bower.io/#getting-started), [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed Pixi.js directly on your HTML page. +Alternatively, PixiJS can be installed with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page. -#### Bower Install - -``` -$> bower install pixi.js -``` +_Note: After v4.5.0, support for the [Bower](https://bower.io) package manager has been dropped. Please see the [release notes](https://github.com/pixijs/pixi.js/releases/tag/v4.5.0) for more information._ #### NPM Install @@ -62,14 +55,14 @@ #### CDN Install (via cdnjs) ```html - + ``` -_Note: `4.4.3` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ +_Note: `4.5.1` can be replaced by any [released](https://github.com/pixijs/pixi.js/releases) version._ ### Demos ### -- [WebGL Filters!](http://www.goodboydigital.com/pixijs/examples/15/indexAll.html) +- [WebGL Filters!](http://pixijs.github.io/pixi-filters/examples/) - [Run pixie run](http://www.goodboydigital.com/runpixierun) - [Fight for Everyone](http://www.goodboydigital.com/casestudies/fightforeveryone) - [Flash vs HTML](http://flashvhtml.com) @@ -88,7 +81,7 @@ ### Contribute ### -Want to be part of the pixi.js project? Great! All are welcome! We will get there quicker +Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch. @@ -112,7 +105,7 @@ - Primitive Drawing - Masking - Filters -- [User Plugins](https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins) +- [User Plugins](https://github.com/pixijs/pixi.js/wiki/v3-Pixi-Plugins) ### Basic Usage Example ### @@ -153,9 +146,9 @@ ### How to build ### -Note that for most users you don't need to build this project. If all you want is to use pixi, then +Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our [prebuilt releases](https://github.com/pixijs/pixi.js/releases). Really -the only time you should need to build pixi.js is if you are developing it. +the only time you should need to build PixiJS is if you are developing it. If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: @@ -171,7 +164,7 @@ ``` This will create a minified version at `dist/pixi.min.js` and a non-minified version at `dist/pixi.js` -with all the plugins in the pixi.js project. +with all the plugins in the PixiJS project. If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: @@ -193,7 +186,7 @@ $> npm run docs ``` -The documentation uses [Jaguar.js](https://github.com/davidshimjs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) +The documentation uses [Jaguar.js](https://github.com/pixijs/jaguarjs-jsdoc) and the jsdoc format, the configuration file can be found at [scripts/jsdoc.conf.json](scripts/jsdoc.conf.json) ### License ### diff --git a/package.json b/package.json index 60597bd..cb892c1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pixi.js", "version": "5.0.0-alpha", - "description": "Pixi.js is a fast lightweight 2D library that works across all devices.", + "description": "The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.", "author": "Mat Groves", "contributors": [ "Ivan Popelyshev ", @@ -24,12 +24,13 @@ "watch": "npm run dist -- --watch", "watch:lib": "npm run lib -- --watch", "watch:lint": "watch \"eslint scripts src test || exit 0\" src", - "test": "floss --path test/index.js", - "test:debug": "npm test -- --debug", + "test": "npm run lint && npm run dist && npm run coverage", + "unit-test": "floss --path test/index.js", + "unit-test:debug": "npm run unit-test -- --debug", "prerenders": "npm --prefix scripts/renders i scripts/renders", "renders": "electron scripts/renders", "precoverage": "rimraf coverage", - "coverage": "npm test -- -c dist/pixi.js -s -h", + "coverage": "npm run unit-test -- -c dist/pixi.js -s -h", "lint": "eslint scripts src test --max-warnings 0", "lintfix": "npm run lint --fix", "prebuild": "npm run lint", @@ -43,9 +44,8 @@ "publish:patch": "npm version patch && npm publish", "publish:minor": "npm version minor && npm publish", "publish:major": "npm version major && npm publish", - "postversion": "npm run clean && npm run build && npm run lib && npm test", - "postpublish": "git push && git push --tags && npm run release", - "release": "node scripts/release" + "postversion": "npm run clean && npm run build && npm run lib && npm run unit-test", + "postpublish": "git push && git push --tags" }, "files": [ "dist/", @@ -63,9 +63,11 @@ "mini-runner": "^1.0.1", "object-assign": "^4.0.1", "pixi-gl-core": "^1.0.3", - "resource-loader": "^2.0.6" + "remove-array-items": "^1.0.0", + "resource-loader": "^2.0.9" }, "devDependencies": { + "@pixi/jsdoc-template": "^2.0.0", "babel-cli": "^6.18.0", "babel-plugin-static-fs": "^1.1.0", "babel-plugin-version-inline": "^1.0.0", @@ -75,10 +77,8 @@ "electron": "^1.4.15", "eslint": "^3.5.0", "floss": "^2.0.1", - "gh-pages": "^0.12.0", - "jaguarjs-jsdoc": "^1.0.1", "js-md5": "^0.4.1", - "jsdoc": "^3.4.2", + "jsdoc": "3.4.3", "minimist": "^1.2.0", "mkdirp": "^0.5.1", "parallelshell": "^2.0.0", diff --git a/scripts/jsdoc.conf.json b/scripts/jsdoc.conf.json index 3f52180..2ee888c 100644 --- a/scripts/jsdoc.conf.json +++ b/scripts/jsdoc.conf.json @@ -22,11 +22,11 @@ "default" : { "outputSourceFiles" : true }, - "applicationName": "PIXI", + "applicationName": "PixiJS", "footer" : "Made with ♥ by Goodboy Digital (goodboydigital.com)", - "copyright" : "PIXI Copyright © 2013-2016 Mat Groves.", + "copyright" : "PixiJS Copyright © 2013-2017 Mat Groves.", "disqus": "", - "googleAnalytics": "", + "googleAnalytics": "UA-103772589-5", "openGraph": { "title": "", "type": "website", @@ -35,9 +35,9 @@ "url": "" }, "meta": { - "title": "", - "description": "", - "keyword": "" + "title": "PixiJS API Documentation", + "description": "Documentation for PixiJS library", + "keyword": "docs, documentation, pixi, pixijs, renderer, html5, javascript, jsdoc" }, "linenums" : true }, @@ -51,6 +51,6 @@ "private" : false, "lenient" : true, "destination" : "./docs", - "template" : "./node_modules/jaguarjs-jsdoc" + "template" : "./node_modules/@pixi/jsdoc-template" } } diff --git a/scripts/release.js b/scripts/release.js deleted file mode 100644 index c4c8e36..0000000 --- a/scripts/release.js +++ /dev/null @@ -1,42 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -// Publish script to push releases of the bin files -// the normally are gitignored -const ghpages = require('gh-pages'); -const path = require('path'); -const packageInfo = require(path.join(__dirname, '..', 'package.json')); - -const options = { - src: [ - 'dist/**/*', - 'lib/**/*', - 'src/**/*', - 'scripts/**/*', - 'test/**/*', - '*.json', - '*.md', - 'LICENSE', - '.eslintrc', - '.editorconfig', - '.travis.yml', - '.babelrc', - ], - dotfiles: true, - branch: 'release', - message: packageInfo.version, - logger: console.log.bind(console), -}; - -ghpages.publish(process.cwd(), options, (err) => -{ - if (err) - { - console.log(err); - process.exit(1); - - return; - } - - process.exit(0); -}); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index dc960f0..cfc49d7 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -21,11 +21,7 @@ const DIV_HOOK_ZINDEX = 2; /** -<<<<<<< HEAD - * The Accessibility manager recreates the ability to tab and and have content read by screen -======= * The Accessibility manager recreates the ability to tab and have content read by screen ->>>>>>> dev * readers. This is very important as it can possibly help people with disabilities access pixi * content. * @@ -49,7 +45,7 @@ this.createTouchHook(); } - // first we create a div that will sit over the pixi element. This is where the div overlays will go. + // first we create a div that will sit over the PixiJS element. This is where the div overlays will go. const div = document.createElement('div'); div.style.width = `${DIV_TOUCH_SIZE}px`; @@ -60,7 +56,7 @@ div.style.zIndex = DIV_TOUCH_ZINDEX; /** - * This is the dom element that will sit over the pixi element. This is where the div overlays will go. + * This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. * * @type {HTMLElement} * @private diff --git a/src/core/Application.js b/src/core/Application.js index 2fcc729..c48104a 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -27,17 +27,30 @@ // eslint-disable-next-line valid-jsdoc /** * @param {object} [options] - The optional renderer parameters + * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction. + * Note that setting this parameter to false does NOT stop the shared ticker even if you set + * options.sharedTicker to true in case that it is already started. Stop it by your own. * @param {number} [options.width=800] - the width of the renderers view * @param {number} [options.height=600] - the height of the renderers view * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader. */ @@ -60,6 +73,7 @@ * @protected */ this._options = options = Object.assign({ + autoStart: true, sharedTicker: false, forceCanvas: false, sharedLoader: false, @@ -92,7 +106,10 @@ this.ticker = options.sharedTicker ? shared : new Ticker(); // Start the rendering - this.start(); + if (options.autoStart) + { + this.start(); + } } set ticker(ticker) // eslint-disable-line require-jsdoc diff --git a/src/core/autoDetectRenderer.js b/src/core/autoDetectRenderer.js index 9ec0364..7fd1c3e 100644 --- a/src/core/autoDetectRenderer.js +++ b/src/core/autoDetectRenderer.js @@ -17,9 +17,21 @@ * @param {boolean} [options.transparent=false] - If the render view is transparent, default false * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you - * need to call toDataUrl on the webgl context + * need to call toDataUrl on the webgl context + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or + * not before the new render pass. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, + * stopping pixel interpolation. + * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native. + * FXAA is faster, but may not always look as great **webgl only** + * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices. + * If you experience unexplained flickering try setting this to true. **webgl only** + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card **webgl only** * @return {PIXI.WebGLRenderer|PIXI.CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ export function autoDetectRenderer(options, arg1, arg2, arg3) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index 9b7930c..bd22bf2 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -66,7 +66,7 @@ } else { - // if the child has a parent then lets remove it as Pixi objects can only exist in one place + // if the child has a parent then lets remove it as PixiJS objects can only exist in one place if (child.parent) { child.parent.removeChild(child); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 4ffcfe0..0c3dfd5 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -651,7 +651,7 @@ /** * Draws a polygon using the given path. * - * @param {number[]|PIXI.Point[]} path - The path data used to construct the polygon. + * @param {number[]|PIXI.Point[]|PIXI.Polygon} path - The path data used to construct the polygon. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ drawPolygon(path) @@ -865,6 +865,19 @@ { if (data.shape.contains(tempPoint.x, tempPoint.y)) { + if (data.holes) + { + for (let i = 0; i < data.holes.length; i++) + { + const hole = data.holes[i]; + + if (hole.contains(tempPoint.x, tempPoint.y)) + { + return false; + } + } + } + return true; } } @@ -994,10 +1007,10 @@ const padding = this.boundsPadding; this._localBounds.minX = minX - padding; - this._localBounds.maxX = maxX + (padding * 2); + this._localBounds.maxX = maxX + padding; this._localBounds.minY = minY - padding; - this._localBounds.maxY = maxY + (padding * 2); + this._localBounds.maxY = maxY + padding; } /** diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index fe62c2b..93cadc0 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -5,7 +5,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they * now share 4 bytes on the vertex buffer * diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 01382e8..6eaa746 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -100,7 +100,7 @@ renderer.shader.bind(shader); renderer.geometry.bind(webGLData.geometry); - if (graphics.nativeLines) + if (webGLData.nativeLines) { renderer.geometry.draw(gl.LINES, webGLData.indices.length / 6); } @@ -150,6 +150,7 @@ } let webGLData; + let webGLDataNativeLines; // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used @@ -161,21 +162,27 @@ // TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); + if (data.nativeLines && data.lineWidth) + { + webGLDataNativeLines = this.getWebGLData(webGL, 0, true); + webGL.lastIndex++; + } + if (data.type === SHAPES.POLY) { - buildPoly(data, webGLData); + buildPoly(data, webGLData, webGLDataNativeLines); } if (data.type === SHAPES.RECT) { - buildRectangle(data, webGLData); + buildRectangle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP) { - buildCircle(data, webGLData); + buildCircle(data, webGLData, webGLDataNativeLines); } else if (data.type === SHAPES.RREC) { - buildRoundedRectangle(data, webGLData); + buildRoundedRectangle(data, webGLData, webGLDataNativeLines); } webGL.lastIndex++; @@ -200,19 +207,22 @@ * @private * @param {WebGLRenderingContext} gl - the current WebGL drawing context * @param {number} type - TODO @Alvin + * @param {number} nativeLines - indicate whether the webGLData use for nativeLines. * @return {*} TODO */ - getWebGLData(gl, type) + getWebGLData(gl, type, nativeLines) { let webGLData = gl.data[gl.data.length - 1]; - if (!webGLData || webGLData.points.length > 320000) + if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000) { webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState); + webGLData.nativeLines = nativeLines; + webGLData.reset(type); gl.data.push(webGLData); } diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js index 04d4679..468e3fe 100644 --- a/src/core/graphics/webgl/WebGLGraphicsData.js +++ b/src/core/graphics/webgl/WebGLGraphicsData.js @@ -60,6 +60,15 @@ this.dirty = true; /** + * Whether this graphics is nativeLines or not + * @member {boolean} + */ + this.nativeLines = false; + + this.glPoints = null; + this.glIndices = null; + + /** * * @member {PIXI.Shader} */ diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index abf5d02..14dcdbb 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildCircle(graphicsData, webGLData) +export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines) { // need to convert points to a nice regular data const circleData = graphicsData.shape; @@ -89,7 +90,7 @@ ); } - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 4d6862e..07d9672 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -10,12 +10,13 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function (graphicsData, webGLData) +export default function (graphicsData, webGLData, webGLDataNativeLines) { if (graphicsData.nativeLines) { - buildNativeLine(graphicsData, webGLData); + buildNativeLine(graphicsData, webGLDataNativeLines); } else { diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 36f4f2b..3731811 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildPoly(graphicsData, webGLData) +export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines) { graphicsData.points = graphicsData.shape.points.slice(); @@ -73,6 +74,6 @@ if (graphicsData.lineWidth > 0) { - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 84f44b6..ebf3b8c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -10,8 +10,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRectangle(graphicsData, webGLData) +export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines) { // --- // // need to convert points to a nice regular data @@ -63,7 +64,7 @@ x, y + height, x, y]; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index a6c8461..c28734f 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -11,8 +11,9 @@ * @private * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines */ -export default function buildRoundedRectangle(graphicsData, webGLData) +export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -70,7 +71,7 @@ graphicsData.points = recPoints; - buildLine(graphicsData, webGLData); + buildLine(graphicsData, webGLData, webGLDataNativeLines); graphicsData.points = tempPoints; } diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index 3679860..d0f53d4 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -1,7 +1,7 @@ import Point from './Point'; /** - * The pixi Matrix class as an object, which makes it a lot faster, + * The PixiJS Matrix class as an object, which makes it a lot faster, * here is a representation of it : * | a | b | tx| * | c | d | ty| diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 29b312a..0cc0e4d 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -21,25 +21,25 @@ * @member {number} * @default 0 */ - this.x = x; + this.x = Number(x); /** * @member {number} * @default 0 */ - this.y = y; + this.y = Number(y); /** * @member {number} * @default 0 */ - this.width = width; + this.width = Number(width); /** * @member {number} * @default 0 */ - this.height = height; + this.height = Number(height); /** * The type of the object, mainly used to avoid `instanceof` checks diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index d379539..e883861 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -9,8 +9,8 @@ const tempMatrix = new Matrix(); /** - * The SystemRenderer is the base for a Pixi Renderer. It is extended by the {@link PIXI.CanvasRenderer} - * and {@link PIXI.WebGLRenderer} which can be used for rendering a Pixi scene. + * The SystemRenderer is the base for a PixiJS Renderer. It is extended by the {@link PIXI.CanvasRenderer} + * and {@link PIXI.WebGLRenderer} which can be used for rendering a PixiJS scene. * * @abstract * @class @@ -31,11 +31,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) @@ -126,8 +128,8 @@ /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. - * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every - * frame to set the canvas background color. If the scene is transparent Pixi will use clearRect + * If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every + * frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect * to clear the canvas every frame. Disable this by setting this to false. For example if * your game has a canvas filling background image you often don't need this set. * @@ -137,7 +139,7 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. * Handy for crisp pixel art and speed on legacy devices. * * @member {boolean} @@ -293,7 +295,6 @@ this._backgroundColorRgba = null; this._backgroundColorString = null; - this.backgroundColor = 0; this._tempDisplayObjectParent = null; this._lastObjectRendered = null; } diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 691caf0..8c4789c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -28,11 +28,13 @@ * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment) * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The * resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or + * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, + * enable this if you need to call toDataUrl on the webgl context. + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ constructor(options, arg2, arg3) @@ -42,13 +44,20 @@ this.type = RENDERER_TYPE.CANVAS; /** - * The canvas 2d context that everything is drawn with. + * The root canvas 2d context that everything is drawn with. * * @member {CanvasRenderingContext2D} */ this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); /** + * The currently active canvas 2d context (could change with renderTextures) + * + * @member {CanvasRenderingContext2D} + */ + this.context = this.rootContext; + + /** * Boolean flag controlling canvas refresh. * * @member {boolean} @@ -94,7 +103,6 @@ this.blendModes = mapCanvasBlendModesToPixi(); this._activeBlendMode = null; - this.context = null; this.renderingToScreen = false; this.resize(this.options.width, this.options.height); @@ -191,8 +199,10 @@ // displayObject.hitArea = //TODO add a temp hit area } + context.save(); context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; + this._activeBlendMode = BLEND_MODES.NORMAL; context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL]; if (navigator.isCocoonJS && this.view.screencanvas) @@ -226,6 +236,8 @@ displayObject.renderCanvas(this); this.context = tempContext; + context.restore(); + this.resolution = rootResolution; this.emit('postrender'); @@ -304,12 +316,20 @@ super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. - // surely a browser bug?? Let pixi fix that for you.. + // surely a browser bug?? Let PixiJS fix that for you.. if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (settings.SCALE_MODE === SCALE_MODES.LINEAR); } } + + /** + * Checks if blend mode has changed. + */ + invalidateBlendMode() + { + this._activeBlendMode = this.blendModes.indexOf(this.context.globalCompositeOperation); + } } /** diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 169e268..e3e52d4 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -160,6 +160,7 @@ popMask(renderer) { renderer.context.restore(); + renderer.invalidateBlendMode(); } /** diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 7bf613b..6a4759d 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -53,6 +53,10 @@ array[BLEND_MODES.COLOR] = 'source-over'; array[BLEND_MODES.LUMINOSITY] = 'source-over'; } + // not-premultiplied, only for webgl + array[BLEND_MODES.NORMAL_NPM] = array[BLEND_MODES.NORMAL]; + array[BLEND_MODES.ADD_NPM] = array[BLEND_MODES.ADD]; + array[BLEND_MODES.SCREEN_NPM] = array[BLEND_MODES.SCREEN]; return array; } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 8227289..e940b26 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -198,15 +198,19 @@ return; } - if (texture._glTextures[this.renderer.CONTEXT_UID]) + const uid = this.renderer.CONTEXT_UID; + const glTextures = texture._glTextures; + const glRenderTargets = texture._glRenderTargets; + + if (glTextures[uid]) { this.renderer.unbindTexture(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + glTextures[uid].destroy(); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); - delete texture._glTextures[this.renderer.CONTEXT_UID]; + delete glTextures[uid]; if (!skipRemove) { @@ -218,6 +222,12 @@ } } } + + if (glRenderTargets && glRenderTargets[uid]) + { + glRenderTargets[uid].destroy(); + delete glRenderTargets[uid]; + } } /** diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a575064..4d95e15 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -45,15 +45,19 @@ * FXAA is faster, but may not always look as great * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. * The resolution of the renderer retina would be 2. - * @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear + * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear * the canvas or not before the new render pass. If you wish to set this to false, you *must* set * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, * enable this if you need to call toDataUrl on the webgl context. - * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when + * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when * rendering, stopping pixel interpolation. - * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility - * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area + * (shown if not transparent). + * @param {boolean} [options.legacy=false] - If true PixiJS will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. + * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance" + * for devices with dual graphics card */ constructor(options, arg2, arg3) { @@ -85,8 +89,6 @@ resize: new Runner('resize', 2), }; - this._backgroundColorRgba[3] = this.transparent ? 0 : 1; - this.globalUniforms = new UniformGroup({ projectionMatrix: new Matrix(), }, true); @@ -106,7 +108,6 @@ .addSystem(BatchSystem, 'batch'); this.initPlugins(); - /** * The options passed in to create a new webgl context. * @@ -125,13 +126,12 @@ premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied', stencil: true, preserveDrawingBuffer: options.preserveDrawingBuffer, + powerPreference: this.options.powerPreference, }); } this.renderingToScreen = true; - this._initContext(); - sayHello(this.context.webGLVersion === 2 ? 'WebGL 2' : 'WebGL 1'); } @@ -189,31 +189,6 @@ } /** - * Creates the WebGL context - * - * @private - */ - _initContext() - { - const gl = this.gl; - - const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); - - this.boundTextures = new Array(maxTextures); - this.emptyTextures = new Array(maxTextures); - - const tempObj = { _glTextures: {} }; - - for (let i = 0; i < maxTextures; i++) - { - this.boundTextures[i] = tempObj; - } - - // setup the width/height properties and gl viewport - this.resize(this.screen.width, this.screen.height); - } - - /** * Renders the object to its webGL view * * @param {PIXI.DisplayObject} displayObject - the object to be rendered @@ -266,6 +241,7 @@ this.batch.currentRenderer.flush(); this.runners.postrender.run(); + this.emit('postrender'); } @@ -278,6 +254,7 @@ resize(screenWidth, screenHeight) { SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); + this.runners.resize.run(screenWidth, screenHeight); } @@ -289,7 +266,6 @@ reset() { this.runners.reset.run(); - return this; } @@ -306,8 +282,6 @@ // call base destroy super.destroy(removeView); - this.destroyPlugins(); - // TODO nullify all the managers.. this.gl = null; } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index fa3d883..5e065e2 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -22,7 +22,39 @@ super(program, uniforms); - this.blendMode = BLEND_MODES.NORMAL; + this._blendMode = BLEND_MODES.NORMAL; + + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + + /** + * An object containing the current values of custom uniforms. + * @example Updating the value of a custom uniform + * filter.uniforms.time = performance.now(); + * + * @member {object} + */ + this.uniforms = {}; + + for (const i in this.uniformData) + { + this.uniforms[i] = this.uniformData[i].value; + if (this.uniformData[i].type) + { + this.uniformData[i].type = this.uniformData[i].type.toLowerCase(); + } + } + + // this is where we store shader references.. + // TODO we could cache this! + this.glShaders = {}; + + // used for cacheing.. sure there is a better way! + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + { + SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = uid(); + } + + this.glShaderKey = SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]; /** * The padding of the filter. Some filters require extra space to breath such as a blur. @@ -49,7 +81,7 @@ this.enabled = true; /** - * If enabled, pixi will fit the filter area into boundaries for better performance. + * If enabled, PixiJS will fit the filter area into boundaries for better performance. * Switch it off if it does not work for specific shader. * * @member {boolean} @@ -76,4 +108,80 @@ // or just do a regular render.. } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this._blendMode = value; + } + + /** + * The default vertex shader source + * + * @static + * @constant + */ + static get defaultVertexSrc() + { + return [ + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + + 'uniform mat3 projectionMatrix;', + 'uniform mat3 filterMatrix;', + + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'void main(void){', + ' gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', + ' vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy;', + ' vTextureCoord = aTextureCoord ;', + '}', + ].join('\n'); + } + + /** + * The default fragment shader source + * + * @static + * @constant + */ + static get defaultFragmentSrc() + { + return [ + 'varying vec2 vTextureCoord;', + 'varying vec2 vFilterCoord;', + + 'uniform sampler2D uSampler;', + 'uniform sampler2D filterSampler;', + + 'void main(void){', + ' vec4 masky = texture2D(filterSampler, vFilterCoord);', + ' vec4 sample = texture2D(uSampler, vTextureCoord);', + ' vec4 color;', + ' if(mod(vFilterCoord.x, 1.0) > 0.5)', + ' {', + ' color = vec4(1.0, 0.0, 0.0, 1.0);', + ' }', + ' else', + ' {', + ' color = vec4(0.0, 1.0, 0.0, 1.0);', + ' }', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + ' gl_FragColor = mix(sample, masky, 0.5);', + ' gl_FragColor *= sample.a;', + '}', + ].join('\n'); + } } diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 851ad69..f955a9d 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -40,36 +40,13 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite export function calculateSpriteMatrix(outputMatrix, filterArea, textureSize, sprite) { - const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); const texture = sprite._texture.baseTexture; - - // TODO unwrap? - const mappedMatrix = outputMatrix.identity(); - - // scale.. - const ratio = textureSize.height / textureSize.width; - - mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height); - - mappedMatrix.scale(1, ratio); - - const translateScaleX = (textureSize.width / texture.width); - const translateScaleY = (textureSize.height / texture.height); - - worldTransform.tx /= texture.width * translateScaleX; - - // this...? free beer for anyone who can explain why this makes sense! - worldTransform.ty /= texture.width * translateScaleX; - // worldTransform.ty /= texture.height * translateScaleY; + const mappedMatrix = outputMatrix.set(textureSize.width, 0, 0, textureSize.height, filterArea.x, filterArea.y); + const worldTransform = sprite.worldTransform.copy(Matrix.TEMP_MATRIX); worldTransform.invert(); mappedMatrix.prepend(worldTransform); - - // apply inverse scale.. - mappedMatrix.scale(1, 1 / ratio); - - mappedMatrix.scale(translateScaleX, translateScaleY); - + mappedMatrix.scale(1.0 / texture.width, 1.0 / texture.height); mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y); return mappedMatrix; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js new file mode 100644 index 0000000..527d24c --- /dev/null +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -0,0 +1,45 @@ +import WebGLManager from './WebGLManager'; + +/** + * @class + * @memberof PIXI + * @extends PIXI.WebGLManager + */ +export default class BlendModeManager extends WebGLManager +{ + /** + * @param {PIXI.WebGLRenderer} renderer - The renderer this manager works for. + */ + constructor(renderer) + { + super(renderer); + + /** + * @member {number} + */ + this.currentBlendMode = 99999; + } + + /** + * Sets-up the given blendMode from WebGL's point of view. + * + * @param {number} blendMode - the blendMode, should be a PixiJS const, such as + * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. + * @return {boolean} Returns if the blend mode was changed. + */ + setBlendMode(blendMode) + { + if (this.currentBlendMode === blendMode) + { + return false; + } + + this.currentBlendMode = blendMode; + + const mode = this.renderer.blendModes[this.currentBlendMode]; + + this.renderer.gl.blendFunc(mode[0], mode[1]); + + return true; + } +} diff --git a/src/core/renderers/webgl/systems/FilterSystem.js b/src/core/renderers/webgl/systems/FilterSystem.js index 7c5ed2c..a585386 100644 --- a/src/core/renderers/webgl/systems/FilterSystem.js +++ b/src/core/renderers/webgl/systems/FilterSystem.js @@ -45,6 +45,8 @@ this.pool = {}; this.filterData = null; + + this.managedFilters = []; } contextChange() @@ -235,6 +237,8 @@ shader = filter.glShaders[renderer.CONTEXT_UID] = new Shader(this.gl, filter.vertexSrc, filter.fragmentSrc); } + this.managedFilters.push(filter); + // TODO - this only needs to be done once? renderer.bindVao(null); @@ -266,7 +270,7 @@ const tex = this.renderer.emptyTextures[0]; this.renderer.boundTextures[0] = tex; - // this syncs the pixi filters uniforms with glsl uniforms + // this syncs the PixiJS filters uniforms with glsl uniforms this.syncUniforms(shader, filter); renderer.state.setBlendMode(filter.blendMode); @@ -290,7 +294,7 @@ const uniformData = filter.uniformData; const uniforms = filter.uniforms; - // 0 is reserved for the pixi texture so we start at 1! + // 0 is reserved for the PixiJS texture so we start at 1! let textureCount = 1; let currentState; @@ -330,7 +334,9 @@ // TODO Cacheing layer.. for (const i in uniformData) { - if (uniformData[i].type === 'sampler2D' && uniforms[i] !== 0) + const type = uniformData[i].type; + + if (type === 'sampler2d' && uniforms[i] !== 0) { if (uniforms[i].baseTexture) { @@ -355,9 +361,9 @@ textureCount++; } - else if (uniformData[i].type === 'mat3') + else if (type === 'mat3') { - // check if its pixi matrix.. + // check if its PixiJS matrix.. if (uniforms[i].a !== undefined) { shader.uniforms[i] = uniforms[i].toArray(true); @@ -367,7 +373,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'vec2') + else if (type === 'vec2') { // check if its a point.. if (uniforms[i].x !== undefined) @@ -383,7 +389,7 @@ shader.uniforms[i] = uniforms[i]; } } - else if (uniformData[i].type === 'float') + else if (type === 'float') { if (shader.uniforms.data[i].value !== uniformData[i]) { @@ -489,11 +495,32 @@ /** * Destroys this Filter System. * + * @param {boolean} [contextLost=false] context was lost, do not free shaders + * */ - destroy() + destroy(contextLost = false) { + const renderer = this.renderer; + const filters = this.managedFilters; + + for (let i = 0; i < filters.length; i++) + { + if (!contextLost) + { + filters[i].glShaders[renderer.CONTEXT_UID].destroy(); + } + delete filters[i].glShaders[renderer.CONTEXT_UID]; + } + this.shaderCache = {}; - this.emptyPool(); + if (!contextLost) + { + this.emptyPool(); + } + else + { + this.pool = {}; + } } /** diff --git a/src/core/renderers/webgl/systems/StencilSystem.js b/src/core/renderers/webgl/systems/StencilSystem.js index 81954b1..5c4ca3f 100644 --- a/src/core/renderers/webgl/systems/StencilSystem.js +++ b/src/core/renderers/webgl/systems/StencilSystem.js @@ -38,7 +38,7 @@ } /** - * Applies the Mask and adds it to the current filter stack. @alvin + * Applies the Mask and adds it to the current stencil stack. @alvin * * @param {PIXI.Graphics} graphics - The mask */ @@ -49,58 +49,75 @@ // this.renderer._activeRenderTarget.attachStencilBuffer(); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const prevMaskCount = this.stencilMaskStack.length; - if (sms.length === 0) + if (prevMaskCount === 0) { gl.enable(gl.STENCIL_TEST); - gl.clear(gl.STENCIL_BUFFER_BIT); - gl.stencilFunc(gl.ALWAYS, 1, 1); } - sms.push(graphics); + this.stencilMaskStack.push(graphics); + // Increment the refference stencil value where the new mask overlaps with the old ones. gl.colorMask(false, false, false, false); + gl.stencilFunc(gl.EQUAL, prevMaskCount, this._getBitwiseMask()); gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } /** - * TODO @alvin + * Removes the last mask from the stencil stack. @alvin */ popStencil() { this.renderer.batch.setObjectRenderer(this.renderer.plugins.graphics); const gl = this.renderer.gl; - const sms = this.stencilMaskStack; + const graphics = this.stencilMaskStack.pop(); - const graphics = sms.pop(); - - if (sms.length === 0) + if (this.stencilMaskStack.length === 0) { // the stack is empty! gl.disable(gl.STENCIL_TEST); + gl.clear(gl.STENCIL_BUFFER_BIT); + gl.clearStencil(0); } else { + // Decrement the refference stencil value where the popped mask overlaps with the other ones gl.colorMask(false, false, false, false); gl.stencilOp(gl.KEEP, gl.KEEP, gl.DECR); - this.renderer.plugins.graphics.render(graphics); - gl.colorMask(true, true, true, true); - gl.stencilFunc(gl.NOTEQUAL, 0, sms.length); - gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + this._useCurrent(); } } /** + * Setup renderer to use the current stencil data. + */ + _useCurrent() + { + const gl = this.renderer.gl; + + gl.colorMask(true, true, true, true); + gl.stencilFunc(gl.EQUAL, this.stencilMaskStack.length, this._getBitwiseMask()); + gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP); + } + + /** + * Fill 1s equal to the number of acitve stencil masks. + * + * @return {number} The bitwise mask. + */ + _getBitwiseMask() + { + return (1 << this.stencilMaskStack.length) - 1; + } + + /** * Destroys the mask stack. * */ diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 6c165f2..f64d83e 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -203,7 +203,7 @@ setFrame(destinationFrame, sourceFrame) { this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || destinationFrame; + this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; } /** diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index 75d34e8..674902e 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -33,5 +33,10 @@ array[BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; array[BLEND_MODES.NONE] = [0, 0]; + // not-premultiplied blend modes + array[BLEND_MODES.NORMAL_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + array[BLEND_MODES.ADD_NPM] = [gl.SRC_ALPHA, gl.DST_ALPHA, gl.ONE, gl.DST_ALPHA]; + array[BLEND_MODES.SCREEN_NPM] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_COLOR]; + return array; } diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index b57d095..5774fef 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -143,6 +143,7 @@ { this._textureID = -1; this._textureTrimmedID = -1; + this.cachedTint = 0xFFFFFF; // so if _width is 0 then width was not set.. if (this._width) @@ -360,7 +361,7 @@ this._bounds.minX = this._texture.orig.width * -this._anchor._x; this._bounds.minY = this._texture.orig.height * -this._anchor._y; this._bounds.maxX = this._texture.orig.width * (1 - this._anchor._x); - this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._x); + this._bounds.maxY = this._texture.orig.height * (1 - this._anchor._y); if (!rect) { @@ -393,11 +394,11 @@ const x1 = -width * this.anchor.x; let y1 = 0; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { y1 = -height * this.anchor.y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d2ab0c4..9860e4e 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -9,7 +9,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -126,7 +126,7 @@ if (sprite.tint !== 0xFFFFFF) { - if (sprite.cachedTint !== sprite.tint) + if (sprite.cachedTint !== sprite.tint || sprite.tintedTexture.tintId !== sprite._texture._updateID) { sprite.cachedTint = sprite.tint; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index fd9de5d..9415d31 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -26,17 +26,28 @@ texture.tintCache = texture.tintCache || {}; - if (texture.tintCache[stringColor]) + const cachedTexture = texture.tintCache[stringColor]; + + let canvas; + + if (cachedTexture) { - return texture.tintCache[stringColor]; + if (cachedTexture.tintId === texture._updateID) + { + return texture.tintCache[stringColor]; + } + + canvas = texture.tintCache[stringColor]; + } + else + { + canvas = CanvasTinter.canvas || document.createElement('canvas'); } - // clone texture.. - const canvas = CanvasTinter.canvas || document.createElement('canvas'); - - // CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); + canvas.tintId = texture._updateID; + if (CanvasTinter.convertTintToImage) { // is this better? @@ -78,6 +89,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -109,6 +121,7 @@ crop.width, crop.height ); + context.restore(); }, /** @@ -133,6 +146,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.fillStyle = `#${(`00000${(color | 0).toString(16)}`).substr(-6)}`; context.fillRect(0, 0, crop.width, crop.height); @@ -151,6 +165,7 @@ ); // context.globalCompositeOperation = 'copy'; + context.restore(); }, /** @@ -175,6 +190,7 @@ canvas.width = Math.ceil(crop.width); canvas.height = Math.ceil(crop.height); + context.save(); context.globalCompositeOperation = 'copy'; context.drawImage( texture.baseTexture.source, @@ -187,6 +203,7 @@ crop.width, crop.height ); + context.restore(); const rgbValues = hex2rgb(color); const r = rgbValues[0]; diff --git a/src/core/sprites/webgl/texture.vert b/src/core/sprites/webgl/texture.vert index 81817b1..18b89ff 100644 --- a/src/core/sprites/webgl/texture.vert +++ b/src/core/sprites/webgl/texture.vert @@ -15,5 +15,5 @@ vTextureCoord = aTextureCoord; vTextureId = aTextureId; - vColor = vec4(aColor.rgb * aColor.a, aColor.a); + vColor = aColor; } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index caaf4a9..39f8394 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -22,7 +22,7 @@ * A Text can be created directly from a string and a style object * * ```js - * let text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); + * let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 24, fill : 0xff1010, align : 'center'}); * ``` * * @class @@ -134,6 +134,7 @@ this._font = this._style.toFontString(); + const context = this.context; const measured = TextMetrics.measureText(this._text, this._style, this._style.wordWrap, this.canvas); const width = measured.width; const height = measured.height; @@ -146,32 +147,29 @@ this.canvas.width = Math.ceil((width + (style.padding * 2)) * this.resolution); this.canvas.height = Math.ceil((height + (style.padding * 2)) * this.resolution); - this.context.scale(this.resolution, this.resolution); + context.scale(this.resolution, this.resolution); - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + context.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = this._font; - this.context.strokeStyle = style.stroke; - this.context.lineWidth = style.strokeThickness; - this.context.textBaseline = style.textBaseline; - this.context.lineJoin = style.lineJoin; - this.context.miterLimit = style.miterLimit; + context.font = this._font; + context.strokeStyle = style.stroke; + context.lineWidth = style.strokeThickness; + context.textBaseline = style.textBaseline; + context.lineJoin = style.lineJoin; + context.miterLimit = style.miterLimit; let linePositionX; let linePositionY; if (style.dropShadow) { - this.context.shadowBlur = style.dropShadowBlur; - this.context.globalAlpha = style.dropShadowAlpha; + context.fillStyle = style.dropShadowColor; + context.globalAlpha = style.dropShadowAlpha; + context.shadowBlur = style.dropShadowBlur; if (style.dropShadowBlur > 0) { - this.context.shadowColor = style.dropShadowColor; - } - else - { - this.context.fillStyle = style.dropShadowColor; + context.shadowColor = style.dropShadowColor; } const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; @@ -200,24 +198,24 @@ if (style.stroke && style.strokeThickness) { - this.context.strokeStyle = style.dropShadowColor; + context.strokeStyle = style.dropShadowColor; this.drawLetterSpacing( lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true ); - this.context.strokeStyle = style.stroke; + context.strokeStyle = style.stroke; } } } } // reset the shadow blur and alpha that was set by the drop shadow, for the regular text - this.context.shadowBlur = 0; - this.context.globalAlpha = 1; + context.shadowBlur = 0; + context.globalAlpha = 1; // set canvas text styles - this.context.fillStyle = this._generateFillStyle(style, lines); + context.fillStyle = this._generateFillStyle(style, lines); // draw lines line by line for (let i = 0; i < lines.length; i++) @@ -314,27 +312,32 @@ */ updateTexture() { + const canvas = this.canvas; + if (this._style.trim) { - const trimmed = trimCanvas(this.canvas); + const trimmed = trimCanvas(canvas); - this.canvas.width = trimmed.width; - this.canvas.height = trimmed.height; + canvas.width = trimmed.width; + canvas.height = trimmed.height; this.context.putImageData(trimmed.data, 0, 0); } const texture = this._texture; const style = this._style; const padding = style.trim ? 0 : style.padding; + const baseTexture = texture.baseTexture; - texture.baseTexture.valid = true; - texture.baseTexture.resolution = this.resolution; + baseTexture.hasLoaded = true; + baseTexture.resolution = this.resolution; - texture.baseTexture.width = this.canvas.width / this.resolution; - texture.baseTexture.height = this.canvas.height / this.resolution; - texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; - texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; + baseTexture.realWidth = canvas.width; + baseTexture.realHeight = canvas.height; + baseTexture.width = canvas.width / this.resolution; + baseTexture.height = canvas.height / this.resolution; + texture.trim.width = texture._frame.width = canvas.width / this.resolution; + texture.trim.height = texture._frame.height = canvas.height / this.resolution; texture.trim.x = -padding; texture.trim.y = -padding; @@ -487,7 +490,7 @@ currentIteration += 1; for (let j = 0; j < fill.length; j++) { - if (fillGradientStops[j]) + if (typeof fillGradientStops[j] === 'number') { stop = (fillGradientStops[j] / lines.length) + (i / lines.length); } @@ -512,7 +515,7 @@ for (let i = 0; i < fill.length; i++) { - if (fillGradientStops[i]) + if (typeof fillGradientStops[i] === 'number') { stop = fillGradientStops[i]; } diff --git a/src/core/text/TextMetrics.js b/src/core/text/TextMetrics.js index 27bd145..c4f32e1 100644 --- a/src/core/text/TextMetrics.js +++ b/src/core/text/TextMetrics.js @@ -69,7 +69,7 @@ const lineHeight = style.lineHeight || fontProperties.fontSize + style.strokeThickness; let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) - + ((lines.length - 1) * lineHeight); + + ((lines.length - 1) * (lineHeight + style.leading)); if (style.dropShadow) { @@ -83,7 +83,7 @@ height, lines, lineWidths, - lineHeight, + lineHeight + style.leading, maxLineWidth, fontProperties ); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 4d66953..c682a36 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -11,7 +11,7 @@ dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, - dropShadowColor: '#000000', + dropShadowColor: 'black', dropShadowDistance: 5, fill: 'black', fillGradientType: TEXT_GRADIENT.LINEAR_VERTICAL, @@ -32,6 +32,7 @@ trim: false, wordWrap: false, wordWrapWidth: 100, + leading: 0, }; /** @@ -53,7 +54,7 @@ * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius - * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param {string|number} [style.dropShadowColor='black'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param {number} [style.dropShadowDistance=5] - Set a distance of the drop shadow * @param {string|string[]|number|number[]|CanvasGradient|CanvasPattern} [style.fill='black'] - A canvas * fillstyle that will be used on the text e.g 'red', '#00FF00'. Can be an array to create a gradient @@ -70,6 +71,7 @@ * @param {string} [style.fontVariant='normal'] - The font variant ('normal' or 'small-caps') * @param {string} [style.fontWeight='normal'] - The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', * '200', '300', '400', '500', '600', '700', 800' or '900') + * @param {number} [style.leading=0] - The space between lines * @param {number} [style.letterSpacing=0] - The amount of spacing between letters, default is 0 * @param {number} [style.lineHeight] - The line height, a number that represents the vertical space that a letter uses * @param {string} [style.lineJoin='miter'] - The lineJoin property sets the type of corner created, it can resolve @@ -120,11 +122,16 @@ Object.assign(this, defaultStyle); } + /** + * Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * + * @member {string} + */ get align() { return this._align; } - set align(align) + set align(align) // eslint-disable-line require-jsdoc { if (this._align !== align) { @@ -133,11 +140,16 @@ } } + /** + * Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * + * @member {boolean} + */ get breakWords() { return this._breakWords; } - set breakWords(breakWords) + set breakWords(breakWords) // eslint-disable-line require-jsdoc { if (this._breakWords !== breakWords) { @@ -146,11 +158,16 @@ } } + /** + * Set a drop shadow for the text + * + * @member {boolean} + */ get dropShadow() { return this._dropShadow; } - set dropShadow(dropShadow) + set dropShadow(dropShadow) // eslint-disable-line require-jsdoc { if (this._dropShadow !== dropShadow) { @@ -159,11 +176,16 @@ } } + /** + * Set alpha for the drop shadow + * + * @member {number} + */ get dropShadowAlpha() { return this._dropShadowAlpha; } - set dropShadowAlpha(dropShadowAlpha) + set dropShadowAlpha(dropShadowAlpha) // eslint-disable-line require-jsdoc { if (this._dropShadowAlpha !== dropShadowAlpha) { @@ -172,11 +194,16 @@ } } + /** + * Set a angle of the drop shadow + * + * @member {number} + */ get dropShadowAngle() { return this._dropShadowAngle; } - set dropShadowAngle(dropShadowAngle) + set dropShadowAngle(dropShadowAngle) // eslint-disable-line require-jsdoc { if (this._dropShadowAngle !== dropShadowAngle) { @@ -185,11 +212,16 @@ } } + /** + * Set a shadow blur radius + * + * @member {number} + */ get dropShadowBlur() { return this._dropShadowBlur; } - set dropShadowBlur(dropShadowBlur) + set dropShadowBlur(dropShadowBlur) // eslint-disable-line require-jsdoc { if (this._dropShadowBlur !== dropShadowBlur) { @@ -198,11 +230,16 @@ } } + /** + * A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * + * @member {string|number} + */ get dropShadowColor() { return this._dropShadowColor; } - set dropShadowColor(dropShadowColor) + set dropShadowColor(dropShadowColor) // eslint-disable-line require-jsdoc { const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -212,11 +249,16 @@ } } + /** + * Set a distance of the drop shadow + * + * @member {number} + */ get dropShadowDistance() { return this._dropShadowDistance; } - set dropShadowDistance(dropShadowDistance) + set dropShadowDistance(dropShadowDistance) // eslint-disable-line require-jsdoc { if (this._dropShadowDistance !== dropShadowDistance) { @@ -225,11 +267,18 @@ } } + /** + * A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'. + * Can be an array to create a gradient eg ['#000000','#FFFFFF'] + * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * + * @member {string|string[]|number|number[]|CanvasGradient|CanvasPattern} + */ get fill() { return this._fill; } - set fill(fill) + set fill(fill) // eslint-disable-line require-jsdoc { const outputColor = getColor(fill); if (this._fill !== outputColor) @@ -239,11 +288,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. + * See {@link PIXI.TEXT_GRADIENT} + * + * @member {number} + */ get fillGradientType() { return this._fillGradientType; } - set fillGradientType(fillGradientType) + set fillGradientType(fillGradientType) // eslint-disable-line require-jsdoc { if (this._fillGradientType !== fillGradientType) { @@ -252,11 +307,17 @@ } } + /** + * If fill is an array of colours to create a gradient, this array can set the stop points + * (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them. + * + * @member {number[]} + */ get fillGradientStops() { return this._fillGradientStops; } - set fillGradientStops(fillGradientStops) + set fillGradientStops(fillGradientStops) // eslint-disable-line require-jsdoc { if (!areArraysEqual(this._fillGradientStops,fillGradientStops)) { @@ -265,11 +326,16 @@ } } + /** + * The font family + * + * @member {string|string[]} + */ get fontFamily() { return this._fontFamily; } - set fontFamily(fontFamily) + set fontFamily(fontFamily) // eslint-disable-line require-jsdoc { if (this.fontFamily !== fontFamily) { @@ -278,11 +344,17 @@ } } + /** + * The font size + * (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * + * @member {number|string} + */ get fontSize() { return this._fontSize; } - set fontSize(fontSize) + set fontSize(fontSize) // eslint-disable-line require-jsdoc { if (this._fontSize !== fontSize) { @@ -291,11 +363,17 @@ } } + /** + * The font style + * ('normal', 'italic' or 'oblique') + * + * @member {string} + */ get fontStyle() { return this._fontStyle; } - set fontStyle(fontStyle) + set fontStyle(fontStyle) // eslint-disable-line require-jsdoc { if (this._fontStyle !== fontStyle) { @@ -304,11 +382,17 @@ } } + /** + * The font variant + * ('normal' or 'small-caps') + * + * @member {string} + */ get fontVariant() { return this._fontVariant; } - set fontVariant(fontVariant) + set fontVariant(fontVariant) // eslint-disable-line require-jsdoc { if (this._fontVariant !== fontVariant) { @@ -317,11 +401,17 @@ } } + /** + * The font weight + * ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') + * + * @member {string} + */ get fontWeight() { return this._fontWeight; } - set fontWeight(fontWeight) + set fontWeight(fontWeight) // eslint-disable-line require-jsdoc { if (this._fontWeight !== fontWeight) { @@ -330,11 +420,16 @@ } } + /** + * The amount of spacing between letters, default is 0 + * + * @member {number} + */ get letterSpacing() { return this._letterSpacing; } - set letterSpacing(letterSpacing) + set letterSpacing(letterSpacing) // eslint-disable-line require-jsdoc { if (this._letterSpacing !== letterSpacing) { @@ -343,11 +438,16 @@ } } + /** + * The line height, a number that represents the vertical space that a letter uses + * + * @member {number} + */ get lineHeight() { return this._lineHeight; } - set lineHeight(lineHeight) + set lineHeight(lineHeight) // eslint-disable-line require-jsdoc { if (this._lineHeight !== lineHeight) { @@ -356,11 +456,35 @@ } } + /** + * The space between lines + * + * @member {number} + */ + get leading() + { + return this._leading; + } + set leading(leading) // eslint-disable-line require-jsdoc + { + if (this._leading !== leading) + { + this._leading = leading; + this.styleID++; + } + } + + /** + * The lineJoin property sets the type of corner created, it can resolve spiked text issues. + * Default is 'miter' (creates a sharp corner). + * + * @member {string} + */ get lineJoin() { return this._lineJoin; } - set lineJoin(lineJoin) + set lineJoin(lineJoin) // eslint-disable-line require-jsdoc { if (this._lineJoin !== lineJoin) { @@ -369,11 +493,17 @@ } } + /** + * The miter limit to use when using the 'miter' lineJoin mode + * This can reduce or increase the spikiness of rendered text. + * + * @member {number} + */ get miterLimit() { return this._miterLimit; } - set miterLimit(miterLimit) + set miterLimit(miterLimit) // eslint-disable-line require-jsdoc { if (this._miterLimit !== miterLimit) { @@ -382,11 +512,17 @@ } } + /** + * Occasionally some fonts are cropped. Adding some padding will prevent this from happening + * by adding padding to all sides of the text. + * + * @member {number} + */ get padding() { return this._padding; } - set padding(padding) + set padding(padding) // eslint-disable-line require-jsdoc { if (this._padding !== padding) { @@ -395,11 +531,17 @@ } } + /** + * A canvas fillstyle that will be used on the text stroke + * e.g 'blue', '#FCFF00' + * + * @member {string|number} + */ get stroke() { return this._stroke; } - set stroke(stroke) + set stroke(stroke) // eslint-disable-line require-jsdoc { const outputColor = getColor(stroke); if (this._stroke !== outputColor) @@ -409,11 +551,17 @@ } } + /** + * A number that represents the thickness of the stroke. + * Default is 0 (no stroke) + * + * @member {number} + */ get strokeThickness() { return this._strokeThickness; } - set strokeThickness(strokeThickness) + set strokeThickness(strokeThickness) // eslint-disable-line require-jsdoc { if (this._strokeThickness !== strokeThickness) { @@ -422,11 +570,16 @@ } } + /** + * The baseline of the text that is rendered. + * + * @member {string} + */ get textBaseline() { return this._textBaseline; } - set textBaseline(textBaseline) + set textBaseline(textBaseline) // eslint-disable-line require-jsdoc { if (this._textBaseline !== textBaseline) { @@ -435,11 +588,16 @@ } } + /** + * Trim transparent borders + * + * @member {boolean} + */ get trim() { return this._trim; } - set trim(trim) + set trim(trim) // eslint-disable-line require-jsdoc { if (this._trim !== trim) { @@ -448,11 +606,16 @@ } } + /** + * Indicates if word wrap should be used + * + * @member {boolean} + */ get wordWrap() { return this._wordWrap; } - set wordWrap(wordWrap) + set wordWrap(wordWrap) // eslint-disable-line require-jsdoc { if (this._wordWrap !== wordWrap) { @@ -461,11 +624,16 @@ } } + /** + * The width at which text will wrap, it needs wordWrap to be set to true + * + * @member {number} + */ get wordWrapWidth() { return this._wordWrapWidth; } - set wordWrapWidth(wordWrapWidth) + set wordWrapWidth(wordWrapWidth) // eslint-disable-line require-jsdoc { if (this._wordWrapWidth !== wordWrapWidth) { diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index 025e96d..9951fa1 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -2,7 +2,7 @@ import FrameBuffer from './FrameBuffer'; /** - * A BaseRenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded * otherwise black rectangles will be drawn instead. diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index cd5161c..8722ae3 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -437,7 +437,7 @@ return baseTextureFromCache; } } - else + else if (baseTexture && baseTexture.textureCacheIds) { for (let i = 0; i < baseTexture.textureCacheIds.length; ++i) { diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index b3c6297..4fe047f 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -2,7 +2,7 @@ import Texture from './Texture'; /** - * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it. * * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded * otherwise black rectangles will be drawn instead. @@ -97,6 +97,9 @@ */ resize(width, height, doNotResizeBaseTexture) { + width = Math.ceil(width); + height = Math.ceil(height); + // TODO - could be not required.. this.valid = (width > 0 && height > 0); diff --git a/src/core/textures/Spritesheet.js b/src/core/textures/Spritesheet.js index 3b14078..b890c1a 100644 --- a/src/core/textures/Spritesheet.js +++ b/src/core/textures/Spritesheet.js @@ -152,6 +152,7 @@ { let frameIndex = initialFrameIndex; const maxFrames = Spritesheet.BATCH_SIZE; + const sourceScale = this.baseTexture.sourceScale; while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) { @@ -165,26 +166,26 @@ const orig = new Rectangle( 0, 0, - this._frames[i].sourceSize.w / this.resolution, - this._frames[i].sourceSize.h / this.resolution + Math.floor(this._frames[i].sourceSize.w * sourceScale) / this.resolution, + Math.floor(this._frames[i].sourceSize.h * sourceScale) / this.resolution ); if (this._frames[i].rotated) { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.h / this.resolution, - rect.w / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution ); } else { frame = new Rectangle( - rect.x / this.resolution, - rect.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(rect.x * sourceScale) / this.resolution, + Math.floor(rect.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } @@ -192,10 +193,10 @@ if (this._frames[i].trimmed) { trim = new Rectangle( - this._frames[i].spriteSourceSize.x / this.resolution, - this._frames[i].spriteSourceSize.y / this.resolution, - rect.w / this.resolution, - rect.h / this.resolution + Math.floor(this._frames[i].spriteSourceSize.x * sourceScale) / this.resolution, + Math.floor(this._frames[i].spriteSourceSize.y * sourceScale) / this.resolution, + Math.floor(rect.w * sourceScale) / this.resolution, + Math.floor(rect.h * sourceScale) / this.resolution ); } diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 55de0b9..3a65e61 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -409,11 +409,15 @@ return textureFromCache; } } - else + else if (texture && texture.textureCacheIds) { for (let i = 0; i < texture.textureCacheIds.length; ++i) { - delete TextureCache[texture.textureCacheIds[i]]; + // Check that texture matches the one being passed in before deleting it from the cache. + if (TextureCache[texture.textureCacheIds[i]] === texture) + { + delete TextureCache[texture.textureCacheIds[i]]; + } } texture.textureCacheIds.length = 0; @@ -440,11 +444,18 @@ this.noFrame = false; - if (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) + const { x, y, width, height } = frame; + const xNotFit = x + width > this.baseTexture.width; + const yNotFit = y + height > this.baseTexture.height; + + if (xNotFit || yNotFit) { + const relationship = xNotFit && yNotFit ? 'and' : 'or'; + const errorX = `X: ${x} + ${width} = ${x + width} > ${this.baseTexture.width}`; + const errorY = `Y: ${y} + ${height} = ${y + height} > ${this.baseTexture.height}`; + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions: ' - + `X: ${frame.x} + ${frame.width} > ${this.baseTexture.width} ` - + `Y: ${frame.y} + ${frame.height} > ${this.baseTexture.height}`); + + `${errorX} ${relationship} ${errorY}`); } // this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index 65b74b9..86f0873 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -2,11 +2,12 @@ import { uid, BaseTextureCache } from '../utils'; import { shared } from '../ticker'; import { UPDATE_PRIORITY } from '../const'; +import determineCrossOrigin from '../utils/determineCrossOrigin'; /** * A texture of a [playing] Video. * - * Video base textures mimic Pixi BaseTexture.from.... method in their creation process. + * Video base textures mimic PixiJS BaseTexture.from.... method in their creation process. * * This can be used in several ways, such as: * @@ -201,7 +202,7 @@ } /** - * Mimic Pixi BaseTexture.from.... method. + * Mimic PixiJS BaseTexture.from.... method. * * @static * @param {HTMLVideoElement} video - Video to create texture from @@ -236,15 +237,27 @@ * @param {string} [videoSrc.mime] - The mimetype of the video (e.g. 'video/mp4'). If not specified * the url's extension will be used as the second part of the mime type. * @param {number} scaleMode - See {@link PIXI.SCALE_MODES} for possible values + * @param {boolean} [crossorigin=(auto)] - Should use anonymous CORS? Defaults to true if the URL is not a data-URI. * @return {PIXI.VideoBaseTexture} Newly created VideoBaseTexture */ - static fromUrl(videoSrc, scaleMode) + static fromUrl(videoSrc, scaleMode, crossorigin) { const video = document.createElement('video'); video.setAttribute('webkit-playsinline', ''); video.setAttribute('playsinline', ''); + const url = Array.isArray(videoSrc) ? (videoSrc[0].src || videoSrc[0]) : (videoSrc.src || videoSrc); + + if (crossorigin === undefined && url.indexOf('data:') !== 0) + { + video.crossOrigin = determineCrossOrigin(url); + } + else if (crossorigin) + { + video.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous'; + } + // array of objects or strings if (Array.isArray(videoSrc)) { @@ -256,7 +269,7 @@ // single object or string else { - video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime)); + video.appendChild(createSource(url, videoSrc.mime)); } video.load(); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index 40df138..e07e0a6 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -81,9 +81,9 @@ * this value will have a precision of 1 µs. * * @member {number} - * @default 0 + * @default -1 */ - this.lastTime = 0; + this.lastTime = -1; /** * Factor of current {@link PIXI.ticker.Ticker#deltaTime}. @@ -243,7 +243,7 @@ // Go from highest to lowest priority while (current) { - if (listener.priority >= current.priority) + if (listener.priority > current.priority) { listener.connect(previous); break; diff --git a/src/core/ticker/TickerListener.js b/src/core/ticker/TickerListener.js index 2bedb34..12cbd16 100644 --- a/src/core/ticker/TickerListener.js +++ b/src/core/ticker/TickerListener.js @@ -82,22 +82,25 @@ */ emit(deltaTime) { - if (this.context) + if (this.fn) { - this.fn.call(this.context, deltaTime); - } - else - { - this.fn(deltaTime); - } - - if (this.once) - { - this.destroy(); + if (this.context) + { + this.fn.call(this.context, deltaTime); + } + else + { + this.fn(deltaTime); + } } const redirect = this.next; + if (this.once) + { + this.destroy(true); + } + // Soft-destroying should remove // the next reference if (this._destroyed) diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 609da80..db0fb79 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -4,6 +4,8 @@ import pluginTarget from './pluginTarget'; import * as mixins from './mixin'; import * as isMobile from 'ismobilejs'; +import removeItems from 'remove-array-items'; +import mapPremultipliedBlendModes from './mapPremultipliedBlendModes'; let nextUid = 0; let saidHello = false; @@ -35,6 +37,15 @@ * @type {Object} */ isMobile, + + /** + * @see {@link https://github.com/mreinstein/remove-array-items} + * + * @memberof PIXI.utils + * @function removeItems + * @type {Object} + */ + removeItems, /** * @see {@link https://github.com/primus/eventemitter3} * @@ -252,7 +263,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { const args = [ - `\n %c %c %c Pixi.js ${VERSION} - ✰✰ ${type} ✰✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, + `\n %c %c %c PixiJS ${VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -268,7 +279,7 @@ } else if (window.console) { - window.console.log(`Pixi.js ${VERSION} - ${type} - http://www.pixijs.com/`); + window.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`); } saidHello = true; @@ -333,36 +344,6 @@ } /** - * Remove a range of items from an array - * - * @memberof PIXI.utils - * @function removeItems - * @param {Array<*>} arr The target array - * @param {number} startIdx The index to begin removing from (inclusive) - * @param {number} removeCount How many items to remove - */ -export function removeItems(arr, startIdx, removeCount) -{ - const length = arr.length; - - if (startIdx >= length || removeCount === 0) - { - return; - } - - removeCount = (startIdx + removeCount > length ? length - startIdx : removeCount); - - const len = length - removeCount; - - for (let i = startIdx; i < len; ++i) - { - arr[i] = arr[i + removeCount]; - } - - arr.length = len; -} - -/** * @todo Describe property usage * * @memberof PIXI.utils @@ -425,3 +406,108 @@ delete BaseTextureCache[key]; } } + +/** + * maps premultiply flag and blendMode to adjusted blendMode + * @memberof PIXI.utils + * @const premultiplyBlendMode + * @type {Array} + */ +export const premultiplyBlendMode = mapPremultipliedBlendModes(); + +/** + * changes blendMode according to texture format + * + * @memberof PIXI.utils + * @function correctBlendMode + * @param {number} blendMode supposed blend mode + * @param {boolean} premultiplied whether source is premultiplied + * @returns {number} true blend mode for this texture + */ +export function correctBlendMode(blendMode, premultiplied) +{ + return premultiplyBlendMode[premultiplied ? 1 : 0][blendMode]; +} + +/** + * premultiplies tint + * + * @param {number} tint integet RGB + * @param {number} alpha floating point alpha (0.0-1.0) + * @returns {number} tint multiplied by alpha + */ +export function premultiplyTint(tint, alpha) +{ + if (alpha === 1.0) + { + return (alpha * 255 << 24) + tint; + } + if (alpha === 0.0) + { + return 0; + } + let R = ((tint >> 16) & 0xFF); + let G = ((tint >> 8) & 0xFF); + let B = (tint & 0xFF); + + R = ((R * alpha) + 0.5) | 0; + G = ((G * alpha) + 0.5) | 0; + B = ((B * alpha) + 0.5) | 0; + + return (alpha * 255 << 24) + (R << 16) + (G << 8) + B; +} + +/** + * combines rgb and alpha to out array + * + * @param {Float32Array|number[]} rgb input rgb + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyRgba(rgb, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + if (premultiply || premultiply === undefined) + { + out[0] = rgb[0] * alpha; + out[1] = rgb[1] * alpha; + out[2] = rgb[2] * alpha; + } + else + { + out[0] = rgb[0]; + out[1] = rgb[1]; + out[2] = rgb[2]; + } + out[3] = alpha; + + return out; +} + +/** + * converts integer tint and float alpha to vec4 form, premultiplies by default + * + * @param {number} tint input tint + * @param {number} alpha alpha param + * @param {Float32Array} [out] output + * @param {boolean} [premultiply=true] do premultiply it + * @returns {Float32Array} vec4 rgba + */ +export function premultiplyTintToRgba(tint, alpha, out, premultiply) +{ + out = out || new Float32Array(4); + out[0] = ((tint >> 16) & 0xFF) / 255.0; + out[1] = ((tint >> 8) & 0xFF) / 255.0; + out[2] = (tint & 0xFF) / 255.0; + if (premultiply || premultiply === undefined) + { + out[0] *= alpha; + out[1] *= alpha; + out[2] *= alpha; + } + out[3] = alpha; + + return out; +} diff --git a/src/core/utils/mapPremultipliedBlendModes.js b/src/core/utils/mapPremultipliedBlendModes.js new file mode 100644 index 0000000..ab5a57d --- /dev/null +++ b/src/core/utils/mapPremultipliedBlendModes.js @@ -0,0 +1,38 @@ +import { BLEND_MODES } from '../const'; + +/** + * Corrects PixiJS blend, takes premultiplied alpha into account + * + * @memberof PIXI + * @function mapPremultipliedBlendModes + * @private + * @param {Array} [array] - The array to output into. + * @return {Array} Mapped modes. + */ + +export default function mapPremultipliedBlendModes() +{ + const pm = []; + const npm = []; + + for (let i = 0; i < 32; i++) + { + pm[i] = i; + npm[i] = i; + } + + pm[BLEND_MODES.NORMAL_NPM] = BLEND_MODES.NORMAL; + pm[BLEND_MODES.ADD_NPM] = BLEND_MODES.ADD; + pm[BLEND_MODES.SCREEN_NPM] = BLEND_MODES.SCREEN; + + npm[BLEND_MODES.NORMAL] = BLEND_MODES.NORMAL_NPM; + npm[BLEND_MODES.ADD] = BLEND_MODES.ADD_NPM; + npm[BLEND_MODES.SCREEN] = BLEND_MODES.SCREEN_NPM; + + const array = []; + + array.push(npm); + array.push(pm); + + return array; +} diff --git a/src/deprecation.js b/src/deprecation.js index 0bc5f5a..d1b689e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -1,12 +1,3 @@ -import * as core from './core'; -import * as mesh from './mesh'; -// import * as particles from './particles'; -import * as extras from './extras'; -import * as filters from './filters'; -import * as prepare from './prepare'; -import * as loaders from './loaders'; -import * as interaction from './interaction'; - // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code @@ -47,1186 +38,1210 @@ // @endif } -/** - * @class - * @private - * @name SpriteBatch - * @memberof PIXI - * @see PIXI.ParticleContainer - * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. - * @deprecated since version 3.0.0 - */ -core.SpriteBatch = () => +export default function deprecation(core) { - throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); -}; + const { mesh, particles, extras, filters, prepare, loaders, interaction } = core; -/** - * @class - * @private - * @name AssetLoader - * @memberof PIXI - * @see PIXI.loaders.Loader - * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. - * @deprecated since version 3.0.0 - */ -core.AssetLoader = () => -{ - throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); -}; + Object.defineProperties(core, { -Object.defineProperties(core, { - - /** - * @class - * @private - * @name Stage - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - Stage: { - enumerable: true, - get() - { - warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - - return core.Container; + /** + * @class + * @private + * @name SpriteBatch + * @memberof PIXI + * @see PIXI.ParticleContainer + * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. + * @deprecated since version 3.0.0 + */ + SpriteBatch: { + get() + { + throw new ReferenceError('SpriteBatch does not exist any more, ' + + 'please use the new ParticleContainer instead.'); + }, }, - }, - /** - * @class - * @private - * @name DisplayObjectContainer - * @memberof PIXI - * @see PIXI.Container - * @deprecated since version 3.0.0 - */ - DisplayObjectContainer: { - enumerable: true, - get() - { - warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - - return core.Container; + /** + * @class + * @private + * @name AssetLoader + * @memberof PIXI + * @see PIXI.loaders.Loader + * @throws {ReferenceError} The loader system was overhauled in PixiJS v3, + * please see the new PIXI.loaders.Loader class. + * @deprecated since version 3.0.0 + */ + AssetLoader: { + get() + { + throw new ReferenceError('The loader system was overhauled in PixiJS v3, ' + + 'please see the new PIXI.loaders.Loader class.'); + }, }, - }, - /** - * @class - * @private - * @name Strip - * @memberof PIXI - * @see PIXI.mesh.Mesh - * @deprecated since version 3.0.0 - */ - Strip: { - enumerable: true, - get() - { - warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); + /** + * @class + * @private + * @name Stage + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + Stage: { + get() + { + warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); - return mesh.Mesh; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name Rope - * @memberof PIXI - * @see PIXI.mesh.Rope - * @deprecated since version 3.0.0 - */ - Rope: { - enumerable: true, - get() - { - warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); + /** + * @class + * @private + * @name DisplayObjectContainer + * @memberof PIXI + * @see PIXI.Container + * @deprecated since version 3.0.0 + */ + DisplayObjectContainer: { + get() + { + warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); - return mesh.Rope; + return core.Container; + }, }, - }, - /** - * @class - * @private - * @name ParticleContainer - * @memberof PIXI - * @see PIXI.particles.ParticleContainer - * @deprecated since version 4.0.0 - */ - /* ParticleContainer: { - enumerable: true, - get() - { - warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' - + 'please use particles.ParticleContainer from now on.'); + /** + * @class + * @private + * @name Strip + * @memberof PIXI + * @see PIXI.mesh.Mesh + * @deprecated since version 3.0.0 + */ + Strip: { + get() + { + warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); - return particles.ParticleContainer; + return mesh.Mesh; + }, }, - }, */ - /** - * @class - * @private - * @name MovieClip - * @memberof PIXI - * @see PIXI.extras.MovieClip - * @deprecated since version 3.0.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); + /** + * @class + * @private + * @name Rope + * @memberof PIXI + * @see PIXI.mesh.Rope + * @deprecated since version 3.0.0 + */ + Rope: { + get() + { + warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); - return extras.AnimatedSprite; + return mesh.Rope; + }, }, - }, - /** - * @class - * @private - * @name TilingSprite - * @memberof PIXI - * @see PIXI.extras.TilingSprite - * @deprecated since version 3.0.0 - */ - TilingSprite: { - enumerable: true, - get() - { - warn('The TilingSprite class has been moved to extras.TilingSprite, ' - + 'please use extras.TilingSprite from now on.'); + /** + * @class + * @private + * @name ParticleContainer + * @memberof PIXI + * @see PIXI.particles.ParticleContainer + * @deprecated since version 4.0.0 + */ + ParticleContainer: { + get() + { + warn('The ParticleContainer class has been moved to particles.ParticleContainer, ' + + 'please use particles.ParticleContainer from now on.'); - return extras.TilingSprite; + return particles.ParticleContainer; + }, }, - }, - /** - * @class - * @private - * @name BitmapText - * @memberof PIXI - * @see PIXI.extras.BitmapText - * @deprecated since version 3.0.0 - */ - BitmapText: { - enumerable: true, - get() - { - warn('The BitmapText class has been moved to extras.BitmapText, ' - + 'please use extras.BitmapText from now on.'); + /** + * @class + * @private + * @name MovieClip + * @memberof PIXI + * @see PIXI.extras.MovieClip + * @deprecated since version 3.0.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been moved to extras.AnimatedSprite, please use extras.AnimatedSprite.'); - return extras.BitmapText; + return extras.AnimatedSprite; + }, }, - }, - /** - * @class - * @private - * @name blendModes - * @memberof PIXI - * @see PIXI.BLEND_MODES - * @deprecated since version 3.0.0 - */ - blendModes: { - enumerable: true, - get() - { - warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); + /** + * @class + * @private + * @name TilingSprite + * @memberof PIXI + * @see PIXI.extras.TilingSprite + * @deprecated since version 3.0.0 + */ + TilingSprite: { + get() + { + warn('The TilingSprite class has been moved to extras.TilingSprite, ' + + 'please use extras.TilingSprite from now on.'); - return core.BLEND_MODES; + return extras.TilingSprite; + }, }, - }, - /** - * @class - * @private - * @name scaleModes - * @memberof PIXI - * @see PIXI.SCALE_MODES - * @deprecated since version 3.0.0 - */ - scaleModes: { - enumerable: true, - get() - { - warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); + /** + * @class + * @private + * @name BitmapText + * @memberof PIXI + * @see PIXI.extras.BitmapText + * @deprecated since version 3.0.0 + */ + BitmapText: { + get() + { + warn('The BitmapText class has been moved to extras.BitmapText, ' + + 'please use extras.BitmapText from now on.'); - return core.SCALE_MODES; + return extras.BitmapText; + }, }, - }, - /** - * @class - * @private - * @name BaseTextureCache - * @memberof PIXI - * @see PIXI.utils.BaseTextureCache - * @deprecated since version 3.0.0 - */ - BaseTextureCache: { - enumerable: true, - get() - { - warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' - + 'please use utils.BaseTextureCache from now on.'); + /** + * @class + * @private + * @name blendModes + * @memberof PIXI + * @see PIXI.BLEND_MODES + * @deprecated since version 3.0.0 + */ + blendModes: { + get() + { + warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); - return core.utils.BaseTextureCache; + return core.BLEND_MODES; + }, }, - }, - /** - * @class - * @private - * @name TextureCache - * @memberof PIXI - * @see PIXI.utils.TextureCache - * @deprecated since version 3.0.0 - */ - TextureCache: { - enumerable: true, - get() - { - warn('The TextureCache class has been moved to utils.TextureCache, ' - + 'please use utils.TextureCache from now on.'); + /** + * @class + * @private + * @name scaleModes + * @memberof PIXI + * @see PIXI.SCALE_MODES + * @deprecated since version 3.0.0 + */ + scaleModes: { + get() + { + warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); - return core.utils.TextureCache; + return core.SCALE_MODES; + }, }, - }, - /** - * @namespace - * @private - * @name math - * @memberof PIXI - * @see PIXI - * @deprecated since version 3.0.6 - */ - math: { - enumerable: true, - get() - { - warn('The math namespace is deprecated, please access members already accessible on PIXI.'); + /** + * @class + * @private + * @name BaseTextureCache + * @memberof PIXI + * @see PIXI.utils.BaseTextureCache + * @deprecated since version 3.0.0 + */ + BaseTextureCache: { + get() + { + warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, ' + + 'please use utils.BaseTextureCache from now on.'); - return core; + return core.utils.BaseTextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.AbstractFilter - * @see PIXI.Filter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - enumerable: true, - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); + /** + * @class + * @private + * @name TextureCache + * @memberof PIXI + * @see PIXI.utils.TextureCache + * @deprecated since version 3.0.0 + */ + TextureCache: { + get() + { + warn('The TextureCache class has been moved to utils.TextureCache, ' + + 'please use utils.TextureCache from now on.'); - return core.Filter; + return core.utils.TextureCache; + }, }, - }, - /** - * @class - * @private - * @name PIXI.TransformManual - * @see PIXI.TransformBase - * @deprecated since version 4.0.0 - */ - TransformManual: { - enumerable: true, - get() - { - warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + /** + * @namespace + * @private + * @name math + * @memberof PIXI + * @see PIXI + * @deprecated since version 3.0.6 + */ + math: { + get() + { + warn('The math namespace is deprecated, please access members already accessible on PIXI.'); - return core.TransformBase; + return core; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.TARGET_FPMS - * @see PIXI.settings.TARGET_FPMS - * @deprecated since version 4.2.0 - */ - TARGET_FPMS: { - enumerable: true, - get() - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + /** + * @class + * @private + * @name PIXI.AbstractFilter + * @see PIXI.Filter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { + get() + { + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return core.settings.TARGET_FPMS; + return core.Filter; + }, }, - set(value) - { - warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - core.settings.TARGET_FPMS = value; + /** + * @class + * @private + * @name PIXI.TransformManual + * @see PIXI.TransformBase + * @deprecated since version 4.0.0 + */ + TransformManual: { + get() + { + warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); + + return core.TransformBase; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.FILTER_RESOLUTION - * @see PIXI.settings.FILTER_RESOLUTION - * @deprecated since version 4.2.0 - */ - FILTER_RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.TARGET_FPMS + * @see PIXI.settings.TARGET_FPMS + * @deprecated since version 4.2.0 + */ + TARGET_FPMS: { + get() + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); - return core.settings.FILTER_RESOLUTION; + return core.settings.TARGET_FPMS; + }, + set(value) + { + warn('PIXI.TARGET_FPMS has been deprecated, please use PIXI.settings.TARGET_FPMS'); + + core.settings.TARGET_FPMS = value; + }, }, - set(value) - { - warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); - core.settings.FILTER_RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.FILTER_RESOLUTION + * @see PIXI.settings.FILTER_RESOLUTION + * @deprecated since version 4.2.0 + */ + FILTER_RESOLUTION: { + get() + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + return core.settings.FILTER_RESOLUTION; + }, + set(value) + { + warn('PIXI.FILTER_RESOLUTION has been deprecated, please use PIXI.settings.FILTER_RESOLUTION'); + + core.settings.FILTER_RESOLUTION = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.RESOLUTION - * @see PIXI.settings.RESOLUTION - * @deprecated since version 4.2.0 - */ - RESOLUTION: { - enumerable: true, - get() - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + /** + * @static + * @constant + * @name PIXI.RESOLUTION + * @see PIXI.settings.RESOLUTION + * @deprecated since version 4.2.0 + */ + RESOLUTION: { + get() + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - return core.settings.RESOLUTION; + return core.settings.RESOLUTION; + }, + set(value) + { + warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); + + core.settings.RESOLUTION = value; + }, }, - set(value) - { - warn('PIXI.RESOLUTION has been deprecated, please use PIXI.settings.RESOLUTION'); - core.settings.RESOLUTION = value; + /** + * @static + * @constant + * @name PIXI.MIPMAP_TEXTURES + * @see PIXI.settings.MIPMAP_TEXTURES + * @deprecated since version 4.2.0 + */ + MIPMAP_TEXTURES: { + get() + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + return core.settings.MIPMAP_TEXTURES; + }, + set(value) + { + warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + + core.settings.MIPMAP_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.MIPMAP_TEXTURES - * @see PIXI.settings.MIPMAP_TEXTURES - * @deprecated since version 4.2.0 - */ - MIPMAP_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); + /** + * @static + * @constant + * @name PIXI.SPRITE_BATCH_SIZE + * @see PIXI.settings.SPRITE_BATCH_SIZE + * @deprecated since version 4.2.0 + */ + SPRITE_BATCH_SIZE: { + get() + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - return core.settings.MIPMAP_TEXTURES; + return core.settings.SPRITE_BATCH_SIZE; + }, + set(value) + { + warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + + core.settings.SPRITE_BATCH_SIZE = value; + }, }, - set(value) - { - warn('PIXI.MIPMAP_TEXTURES has been deprecated, please use PIXI.settings.MIPMAP_TEXTURES'); - core.settings.MIPMAP_TEXTURES = value; + /** + * @static + * @constant + * @name PIXI.SPRITE_MAX_TEXTURES + * @see PIXI.settings.SPRITE_MAX_TEXTURES + * @deprecated since version 4.2.0 + */ + SPRITE_MAX_TEXTURES: { + get() + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + return core.settings.SPRITE_MAX_TEXTURES; + }, + set(value) + { + warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); + + core.settings.SPRITE_MAX_TEXTURES = value; + }, }, - }, - /** - * @static - * @constant - * @name PIXI.SPRITE_BATCH_SIZE - * @see PIXI.settings.SPRITE_BATCH_SIZE - * @deprecated since version 4.2.0 - */ - SPRITE_BATCH_SIZE: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); + /** + * @static + * @constant + * @name PIXI.RETINA_PREFIX + * @see PIXI.settings.RETINA_PREFIX + * @deprecated since version 4.2.0 + */ + RETINA_PREFIX: { + get() + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - return core.settings.SPRITE_BATCH_SIZE; + return core.settings.RETINA_PREFIX; + }, + set(value) + { + warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); + + core.settings.RETINA_PREFIX = value; + }, }, - set(value) - { - warn('PIXI.SPRITE_BATCH_SIZE has been deprecated, please use PIXI.settings.SPRITE_BATCH_SIZE'); - core.settings.SPRITE_BATCH_SIZE = value; - }, - }, + /** + * @static + * @constant + * @name PIXI.DEFAULT_RENDER_OPTIONS + * @see PIXI.settings.RENDER_OPTIONS + * @deprecated since version 4.2.0 + */ + DEFAULT_RENDER_OPTIONS: { + get() + { + warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - /** - * @static - * @constant - * @name PIXI.SPRITE_MAX_TEXTURES - * @see PIXI.settings.SPRITE_MAX_TEXTURES - * @deprecated since version 4.2.0 - */ - SPRITE_MAX_TEXTURES: { - enumerable: true, - get() - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - return core.settings.SPRITE_MAX_TEXTURES; - }, - set(value) - { - warn('PIXI.SPRITE_MAX_TEXTURES has been deprecated, please use PIXI.settings.SPRITE_MAX_TEXTURES'); - - core.settings.SPRITE_MAX_TEXTURES = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.RETINA_PREFIX - * @see PIXI.settings.RETINA_PREFIX - * @deprecated since version 4.2.0 - */ - RETINA_PREFIX: { - enumerable: true, - get() - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - return core.settings.RETINA_PREFIX; - }, - set(value) - { - warn('PIXI.RETINA_PREFIX has been deprecated, please use PIXI.settings.RETINA_PREFIX'); - - core.settings.RETINA_PREFIX = value; - }, - }, - - /** - * @static - * @constant - * @name PIXI.DEFAULT_RENDER_OPTIONS - * @see PIXI.settings.RENDER_OPTIONS - * @deprecated since version 4.2.0 - */ - DEFAULT_RENDER_OPTIONS: { - enumerable: true, - get() - { - warn('PIXI.DEFAULT_RENDER_OPTIONS has been deprecated, please use PIXI.settings.DEFAULT_RENDER_OPTIONS'); - - return core.settings.RENDER_OPTIONS; - }, - }, -}); - -// Move the default properties to settings -const defaults = [ - { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, - { parent: 'GC_MODES', target: 'GC_MODE' }, - { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, - { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, - { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, -]; - -for (let i = 0; i < defaults.length; i++) -{ - const deprecation = defaults[i]; - - Object.defineProperty(core[deprecation.parent], 'DEFAULT', { - enumerable: true, - get() - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - return core.settings[deprecation.target]; - }, - set(value) - { - warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, please use PIXI.settings.${deprecation.target}`); - - core.settings[deprecation.target] = value; + return core.settings.RENDER_OPTIONS; + }, }, }); -} -Object.defineProperties(core.settings, { + // Move the default properties to settings + const defaults = [ + { parent: 'TRANSFORM_MODE', target: 'TRANSFORM_MODE' }, + { parent: 'GC_MODES', target: 'GC_MODE' }, + { parent: 'WRAP_MODES', target: 'WRAP_MODE' }, + { parent: 'SCALE_MODES', target: 'SCALE_MODE' }, + { parent: 'PRECISION', target: 'PRECISION_FRAGMENT' }, + ]; - /** - * @static - * @name PRECISION - * @memberof PIXI.settings - * @see PIXI.PRECISION - * @deprecated since version 4.4.0 - */ - PRECISION: { - enumerable: true, - get() - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - return core.settings.PRECISION_FRAGMENT; - }, - set(value) - { - warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); - - core.settings.PRECISION_FRAGMENT = value; - }, - }, -}); - -Object.defineProperties(extras, { - - /** - * @class - * @name MovieClip - * @memberof PIXI.extras - * @see PIXI.extras.AnimatedSprite - * @deprecated since version 4.2.0 - */ - MovieClip: { - enumerable: true, - get() - { - warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); - - return extras.AnimatedSprite; - }, - }, -}); - -core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) -{ - warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); - - return renderer.generateTexture(this, scaleMode, resolution); -}; - -core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) -{ - warn('graphics generate texture has moved to the renderer. ' - + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); - - return this.generateCanvasTexture(scaleMode, resolution); -}; - -core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) -{ - this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); - warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); -}; - -core.RenderTexture.prototype.getImage = function getImage(target) -{ - warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); - - return this.legacyRenderer.extract.image(target); -}; - -core.RenderTexture.prototype.getBase64 = function getBase64(target) -{ - warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); - - return this.legacyRenderer.extract.base64(target); -}; - -core.RenderTexture.prototype.getCanvas = function getCanvas(target) -{ - warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); - - return this.legacyRenderer.extract.canvas(target); -}; - -core.RenderTexture.prototype.getPixels = function getPixels(target) -{ - warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); - - return this.legacyRenderer.pixels(target); -}; - -/** - * @method - * @private - * @name PIXI.Sprite#setTexture - * @see PIXI.Sprite#texture - * @deprecated since version 3.0.0 - * @param {PIXI.Texture} texture - The texture to set to. - */ -core.Sprite.prototype.setTexture = function setTexture(texture) -{ - this.texture = texture; - warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); -}; - -/** - * @method - * @name PIXI.extras.BitmapText#setText - * @see PIXI.extras.BitmapText#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -extras.BitmapText.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); -}; - -/** - * @method - * @name PIXI.Text#setText - * @see PIXI.Text#text - * @deprecated since version 3.0.0 - * @param {string} text - The text to set to. - */ -core.Text.prototype.setText = function setText(text) -{ - this.text = text; - warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); -}; - -/** - * Calculates the ascent, descent and fontSize of a given fontStyle - * - * @name PIXI.Text.calculateFontProperties - * @see PIXI.TextMetrics.measureFont - * @deprecated since version 4.5.0 - * @param {string} font - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.calculateFontProperties = function calculateFontProperties(font) -{ - warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); - - return core.TextMetrics.measureFont(font); -}; - -Object.defineProperties(core.Text, { - fontPropertiesCache: { - get() - { - warn(`Text.fontPropertiesCache is deprecated`); - - return core.TextMetrics._fonts; - }, - }, - fontPropertiesCanvas: { - get() - { - warn(`Text.fontPropertiesCanvas is deprecated`); - - return core.TextMetrics._canvas; - }, - }, - fontPropertiesContext: { - get() - { - warn(`Text.fontPropertiesContext is deprecated`); - - return core.TextMetrics._context; - }, - }, -}); - -/** - * @method - * @name PIXI.Text#setStyle - * @see PIXI.Text#style - * @deprecated since version 3.0.0 - * @param {*} style - The style to set to. - */ -core.Text.prototype.setStyle = function setStyle(style) -{ - this.style = style; - warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); -}; - -/** - * @method - * @name PIXI.Text#determineFontProperties - * @see PIXI.Text#measureFontProperties - * @deprecated since version 4.2.0 - * @private - * @param {string} fontStyle - String representing the style of the font - * @return {Object} Font properties object - */ -core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) -{ - warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); - - return core.TextMetrics.measureFont(fontStyle); -}; - -/** - * @method - * @name PIXI.Text.getFontStyle - * @see PIXI.TextMetrics.getFontStyle - * @deprecated since version 4.5.0 - * @param {PIXI.TextStyle} style - The style to use. - * @return {string} Font string - */ -core.Text.getFontStyle = function getFontStyle(style) -{ - warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); - - style = style || {}; - - if (!(style instanceof core.TextStyle)) + for (let i = 0; i < defaults.length; i++) { - style = new core.TextStyle(style); + const deprecation = defaults[i]; + + Object.defineProperty(core[deprecation.parent], 'DEFAULT', { + get() + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + return core.settings[deprecation.target]; + }, + set(value) + { + warn(`PIXI.${deprecation.parent}.DEFAULT has been deprecated, ` + + `please use PIXI.settings.${deprecation.target}`); + + core.settings[deprecation.target] = value; + }, + }); } - return style.toFontString(); -}; + Object.defineProperties(core.settings, { -Object.defineProperties(core.TextStyle.prototype, { + /** + * @static + * @name PRECISION + * @memberof PIXI.settings + * @see PIXI.PRECISION + * @deprecated since version 4.4.0 + */ + PRECISION: { + get() + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + return core.settings.PRECISION_FRAGMENT; + }, + set(value) + { + warn('PIXI.settings.PRECISION has been deprecated, please use PIXI.settings.PRECISION_FRAGMENT'); + + core.settings.PRECISION_FRAGMENT = value; + }, + }, + }); + + if (extras.AnimatedSprite) + { + Object.defineProperties(extras, { + + /** + * @class + * @name MovieClip + * @memberof PIXI.extras + * @see PIXI.extras.AnimatedSprite + * @deprecated since version 4.2.0 + */ + MovieClip: { + get() + { + warn('The MovieClip class has been renamed to AnimatedSprite, please use AnimatedSprite from now on.'); + + return extras.AnimatedSprite; + }, + }, + }); + } + + core.DisplayObject.prototype.generateTexture = function generateTexture(renderer, scaleMode, resolution) + { + warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); + + return renderer.generateTexture(this, scaleMode, resolution); + }; + + core.Graphics.prototype.generateTexture = function generateTexture(scaleMode, resolution) + { + warn('graphics generate texture has moved to the renderer. ' + + 'Or to render a graphics to a texture using canvas please use generateCanvasTexture'); + + return this.generateCanvasTexture(scaleMode, resolution); + }; + + core.RenderTexture.prototype.render = function render(displayObject, matrix, clear, updateTransform) + { + this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); + warn('RenderTexture.render is now deprecated, please use renderer.render(displayObject, renderTexture)'); + }; + + core.RenderTexture.prototype.getImage = function getImage(target) + { + warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); + + return this.legacyRenderer.extract.image(target); + }; + + core.RenderTexture.prototype.getBase64 = function getBase64(target) + { + warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); + + return this.legacyRenderer.extract.base64(target); + }; + + core.RenderTexture.prototype.getCanvas = function getCanvas(target) + { + warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); + + return this.legacyRenderer.extract.canvas(target); + }; + + core.RenderTexture.prototype.getPixels = function getPixels(target) + { + warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); + + return this.legacyRenderer.pixels(target); + }; + /** - * Set all properties of a font as a single string + * @method + * @private + * @name PIXI.Sprite#setTexture + * @see PIXI.Sprite#texture + * @deprecated since version 3.0.0 + * @param {PIXI.Texture} texture - The texture to set to. + */ + core.Sprite.prototype.setTexture = function setTexture(texture) + { + this.texture = texture; + warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;'); + }; + + if (extras.BitmapText) + { + /** + * @method + * @name PIXI.extras.BitmapText#setText + * @see PIXI.extras.BitmapText#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + extras.BitmapText.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); + }; + } + + /** + * @method + * @name PIXI.Text#setText + * @see PIXI.Text#text + * @deprecated since version 3.0.0 + * @param {string} text - The text to set to. + */ + core.Text.prototype.setText = function setText(text) + { + this.text = text; + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); + }; + + /** + * Calculates the ascent, descent and fontSize of a given fontStyle * - * @name PIXI.TextStyle#font - * @deprecated since version 4.0.0 + * @name PIXI.Text.calculateFontProperties + * @see PIXI.TextMetrics.measureFont + * @deprecated since version 4.5.0 + * @param {string} font - String representing the style of the font + * @return {Object} Font properties object */ - font: { - get() - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - - const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; - - return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; - }, - set(font) - { - warn(`text style property 'font' is now deprecated, please use the ` - + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - - // can work out fontStyle from search of whole string - if (font.indexOf('italic') > 1) - { - this._fontStyle = 'italic'; - } - else if (font.indexOf('oblique') > -1) - { - this._fontStyle = 'oblique'; - } - else - { - this._fontStyle = 'normal'; - } - - // can work out fontVariant from search of whole string - if (font.indexOf('small-caps') > -1) - { - this._fontVariant = 'small-caps'; - } - else - { - this._fontVariant = 'normal'; - } - - // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - const splits = font.split(' '); - let fontSizeIndex = -1; - - this._fontSize = 26; - for (let i = 0; i < splits.length; ++i) - { - if (splits[i].match(/(px|pt|em|%)/)) - { - fontSizeIndex = i; - this._fontSize = splits[i]; - break; - } - } - - // we can now search for fontWeight as we know it must occur before the fontSize - this._fontWeight = 'normal'; - for (let i = 0; i < fontSizeIndex; ++i) - { - if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) - { - this._fontWeight = splits[i]; - break; - } - } - - // and finally join everything together after the fontSize in case the font family has multiple words - if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) - { - this._fontFamily = ''; - for (let i = fontSizeIndex + 1; i < splits.length; ++i) - { - this._fontFamily += `${splits[i]} `; - } - - this._fontFamily = this._fontFamily.slice(0, -1); - } - else - { - this._fontFamily = 'Arial'; - } - - this.styleID++; - }, - }, -}); - -/** - * @method - * @name PIXI.Texture#setFrame - * @see PIXI.Texture#setFrame - * @deprecated since version 3.0.0 - * @param {PIXI.Rectangle} frame - The frame to set. - */ -core.Texture.prototype.setFrame = function setFrame(frame) -{ - this.frame = frame; - warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.addTextureToCache - * @see PIXI.Texture.addToCache - * @deprecated since 4.5.0 - * @param {PIXI.Texture} texture - The Texture to add to the cache. - * @param {string} id - The id that the texture will be stored against. - */ -core.Texture.addTextureToCache = function addTextureToCache(texture, id) -{ - core.Texture.addToCache(texture, id); - warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); -}; - -/** - * @static - * @function - * @name PIXI.Texture.removeTextureFromCache - * @see PIXI.Texture.removeFromCache - * @deprecated since 4.5.0 - * @param {string} id - The id of the texture to be removed - * @return {PIXI.Texture|null} The texture that was removed - */ -core.Texture.removeTextureFromCache = function removeTextureFromCache(id) -{ - warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' - + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' - + 'For that, use BaseTexture.removeFromCache'); - - core.BaseTexture.removeFromCache(id); - - return core.Texture.removeFromCache(id); -}; - -Object.defineProperties(filters, { - - /** - * @class - * @private - * @name PIXI.filters.AbstractFilter - * @see PIXI.AbstractFilter - * @deprecated since version 3.0.6 - */ - AbstractFilter: { - get() - { - warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - - return core.AbstractFilter; - }, - }, - - /** - * @class - * @private - * @name PIXI.filters.SpriteMaskFilter - * @see PIXI.SpriteMaskFilter - * @deprecated since version 3.0.6 - */ - SpriteMaskFilter: { - get() - { - warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - - return core.SpriteMaskFilter; - }, - }, -}); - -/** - * @method - * @name PIXI.utils.uuid - * @see PIXI.utils.uid - * @deprecated since version 3.0.6 - * @return {number} The uid - */ -core.utils.uuid = () => -{ - warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); - - return core.utils.uid(); -}; - -/** - * @method - * @name PIXI.utils.canUseNewCanvasBlendModes - * @see PIXI.CanvasTinter - * @deprecated - * @return {boolean} Can use blend modes. - */ -core.utils.canUseNewCanvasBlendModes = () => -{ - warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); - - return core.CanvasTinter.canUseMultiply; -}; - -let saidHello = true; - -/** - * @name PIXI.utils._saidHello - * @type {boolean} - * @see PIXI.utils.skipHello - * @deprecated since 4.1.0 - */ -Object.defineProperty(core.utils, '_saidHello', { - set(bool) + core.Text.calculateFontProperties = function calculateFontProperties(font) { - if (bool) + warn(`Text.calculateFontProperties is now deprecated, please use the TextMetrics.measureFont`); + + return core.TextMetrics.measureFont(font); + }; + + Object.defineProperties(core.Text, { + fontPropertiesCache: { + get() + { + warn(`Text.fontPropertiesCache is deprecated`); + + return core.TextMetrics._fonts; + }, + }, + fontPropertiesCanvas: { + get() + { + warn(`Text.fontPropertiesCanvas is deprecated`); + + return core.TextMetrics._canvas; + }, + }, + fontPropertiesContext: { + get() + { + warn(`Text.fontPropertiesContext is deprecated`); + + return core.TextMetrics._context; + }, + }, + }); + + /** + * @method + * @name PIXI.Text#setStyle + * @see PIXI.Text#style + * @deprecated since version 3.0.0 + * @param {*} style - The style to set to. + */ + core.Text.prototype.setStyle = function setStyle(style) + { + this.style = style; + warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); + }; + + /** + * @method + * @name PIXI.Text#determineFontProperties + * @see PIXI.Text#measureFontProperties + * @deprecated since version 4.2.0 + * @private + * @param {string} fontStyle - String representing the style of the font + * @return {Object} Font properties object + */ + core.Text.prototype.determineFontProperties = function determineFontProperties(fontStyle) + { + warn('determineFontProperties is now deprecated, please use TextMetrics.measureFont method'); + + return core.TextMetrics.measureFont(fontStyle); + }; + + /** + * @method + * @name PIXI.Text.getFontStyle + * @see PIXI.TextMetrics.getFontStyle + * @deprecated since version 4.5.0 + * @param {PIXI.TextStyle} style - The style to use. + * @return {string} Font string + */ + core.Text.getFontStyle = function getFontStyle(style) + { + warn('getFontStyle is now deprecated, please use TextStyle.toFontString() instead'); + + style = style || {}; + + if (!(style instanceof core.TextStyle)) { - warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); - this.skipHello(); + style = new core.TextStyle(style); } - saidHello = bool; - }, - get() - { - return saidHello; - }, -}); -/** - * @method - * @name PIXI.prepare.BasePrepare#register - * @see PIXI.prepare.BasePrepare#registerFindHook - * @deprecated since version 4.4.2 - * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` - * function must return `true` if it was able to add item to the queue. - * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and - * function must return `true` if it was able to handle upload of item. - * @return {PIXI.BasePrepare} Instance of plugin for chaining. - */ -prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) -{ - warn('renderer.plugins.prepare.register is now deprecated, ' - + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + return style.toFontString(); + }; - if (addHook) - { - this.registerFindHook(addHook); - } - - if (uploadHook) - { - this.registerUploadHook(uploadHook); - } - - return this; -}; - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -/** - * The number of graphics or textures to upload to the GPU. - * - * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME - * @static - * @type {number} - * @see PIXI.prepare.BasePrepare.limiter - * @deprecated since 4.2.0 - */ -Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { - set() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' - + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); - // because we don't have a reference to the renderer, we can't actually set - // the uploads per frame, so we'll have to stick with the warning. - }, - get() - { - warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' - + 'renderer.plugins.prepare.limiter'); - - return NaN; - }, -}); - -if (loaders.Loader) -{ - const Resource = loaders.Resource; - const Loader = loaders.Loader; - - Object.defineProperties(Resource.prototype, { - isJson: { + Object.defineProperties(core.TextStyle.prototype, { + /** + * Set all properties of a font as a single string + * + * @name PIXI.TextStyle#font + * @deprecated since version 4.0.0 + */ + font: { get() { - warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily', 'fontSize', 'fontStyle', 'fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.JSON; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - }, - isXml: { - get() + set(font) { - warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + warn(`text style property 'font' is now deprecated, please use the ` + + `'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); - return this.type === Resource.TYPE.XML; - }, - }, - isImage: { - get() - { - warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + // can work out fontStyle from search of whole string + if (font.indexOf('italic') > 1) + { + this._fontStyle = 'italic'; + } + else if (font.indexOf('oblique') > -1) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } - return this.type === Resource.TYPE.IMAGE; - }, - }, - isAudio: { - get() - { - warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + // can work out fontVariant from search of whole string + if (font.indexOf('small-caps') > -1) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } - return this.type === Resource.TYPE.AUDIO; - }, - }, - isVideo: { - get() - { - warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + const splits = font.split(' '); + let fontSizeIndex = -1; - return this.type === Resource.TYPE.VIDEO; + this._fontSize = 26; + for (let i = 0; i < splits.length; ++i) + { + if (splits[i].match(/(px|pt|em|%)/)) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for (let i = 0; i < fontSizeIndex; ++i) + { + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) + { + this._fontFamily = ''; + for (let i = fontSizeIndex + 1; i < splits.length; ++i) + { + this._fontFamily += `${splits[i]} `; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.styleID++; }, }, }); - Object.defineProperties(Loader.prototype, { - before: { + /** + * @method + * @name PIXI.Texture#setFrame + * @see PIXI.Texture#setFrame + * @deprecated since version 3.0.0 + * @param {PIXI.Rectangle} frame - The frame to set. + */ + core.Texture.prototype.setFrame = function setFrame(frame) + { + this.frame = frame; + warn('setFrame is now deprecated, please use the frame property, e.g: myTexture.frame = frame;'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.addTextureToCache + * @see PIXI.Texture.addToCache + * @deprecated since 4.5.0 + * @param {PIXI.Texture} texture - The Texture to add to the cache. + * @param {string} id - The id that the texture will be stored against. + */ + core.Texture.addTextureToCache = function addTextureToCache(texture, id) + { + core.Texture.addToCache(texture, id); + warn('Texture.addTextureToCache is deprecated, please use Texture.addToCache from now on.'); + }; + + /** + * @static + * @function + * @name PIXI.Texture.removeTextureFromCache + * @see PIXI.Texture.removeFromCache + * @deprecated since 4.5.0 + * @param {string} id - The id of the texture to be removed + * @return {PIXI.Texture|null} The texture that was removed + */ + core.Texture.removeTextureFromCache = function removeTextureFromCache(id) + { + warn('Texture.removeTextureFromCache is deprecated, please use Texture.removeFromCache from now on. ' + + 'Be aware that Texture.removeFromCache does not automatically its BaseTexture from the BaseTextureCache. ' + + 'For that, use BaseTexture.removeFromCache'); + + core.BaseTexture.removeFromCache(id); + + return core.Texture.removeFromCache(id); + }; + + Object.defineProperties(filters, { + + /** + * @class + * @private + * @name PIXI.filters.AbstractFilter + * @see PIXI.AbstractFilter + * @deprecated since version 3.0.6 + */ + AbstractFilter: { get() { - warn('The before() method is deprecated, please use pre().'); + warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); - return this.pre; + return core.AbstractFilter; }, }, - after: { + + /** + * @class + * @private + * @name PIXI.filters.SpriteMaskFilter + * @see PIXI.SpriteMaskFilter + * @deprecated since version 3.0.6 + */ + SpriteMaskFilter: { get() { - warn('The after() method is deprecated, please use use().'); + warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); - return this.use; + return core.SpriteMaskFilter; + }, + }, + + /** + * @class + * @private + * @name PIXI.filters.VoidFilter + * @see PIXI.filters.AlphaFilter + * @deprecated since version 4.5.7 + */ + VoidFilter: { + get() + { + warn('VoidFilter has been renamed to AlphaFilter, please use PIXI.filters.AlphaFilter'); + + return filters.AlphaFilter; }, }, }); + + /** + * @method + * @name PIXI.utils.uuid + * @see PIXI.utils.uid + * @deprecated since version 3.0.6 + * @return {number} The uid + */ + core.utils.uuid = () => + { + warn('utils.uuid() is deprecated, please use utils.uid() from now on.'); + + return core.utils.uid(); + }; + + /** + * @method + * @name PIXI.utils.canUseNewCanvasBlendModes + * @see PIXI.CanvasTinter + * @deprecated + * @return {boolean} Can use blend modes. + */ + core.utils.canUseNewCanvasBlendModes = () => + { + warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); + + return core.CanvasTinter.canUseMultiply; + }; + + let saidHello = true; + + /** + * @name PIXI.utils._saidHello + * @type {boolean} + * @see PIXI.utils.skipHello + * @deprecated since 4.1.0 + */ + Object.defineProperty(core.utils, '_saidHello', { + set(bool) + { + if (bool) + { + warn('PIXI.utils._saidHello is deprecated, please use PIXI.utils.skipHello()'); + this.skipHello(); + } + saidHello = bool; + }, + get() + { + return saidHello; + }, + }); + + if (prepare.BasePrepare) + { + /** + * @method + * @name PIXI.prepare.BasePrepare#register + * @see PIXI.prepare.BasePrepare#registerFindHook + * @deprecated since version 4.4.2 + * @param {Function} [addHook] - Function call that takes two parameters: `item:*, queue:Array` + * function must return `true` if it was able to add item to the queue. + * @param {Function} [uploadHook] - Function call that takes two parameters: `prepare:CanvasPrepare, item:*` and + * function must return `true` if it was able to handle upload of item. + * @return {PIXI.BasePrepare} Instance of plugin for chaining. + */ + prepare.BasePrepare.prototype.register = function register(addHook, uploadHook) + { + warn('renderer.plugins.prepare.register is now deprecated, ' + + 'please use renderer.plugins.prepare.registerFindHook & renderer.plugins.prepare.registerUploadHook'); + + if (addHook) + { + this.registerFindHook(addHook); + } + + if (uploadHook) + { + this.registerUploadHook(uploadHook); + } + + return this; + }; + } + + if (prepare.canvas) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.canvas.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.canvas, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.CanvasPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (prepare.webgl) + { + /** + * The number of graphics or textures to upload to the GPU. + * + * @name PIXI.prepare.webgl.UPLOADS_PER_FRAME + * @static + * @type {number} + * @see PIXI.prepare.BasePrepare.limiter + * @deprecated since 4.2.0 + */ + Object.defineProperty(prepare.webgl, 'UPLOADS_PER_FRAME', { + set() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please set ' + + 'renderer.plugins.prepare.limiter.maxItemsPerFrame on your renderer'); + // because we don't have a reference to the renderer, we can't actually set + // the uploads per frame, so we'll have to stick with the warning. + }, + get() + { + warn('PIXI.WebGLPrepare.UPLOADS_PER_FRAME has been removed. Please use ' + + 'renderer.plugins.prepare.limiter'); + + return NaN; + }, + }); + } + + if (loaders.Loader) + { + const Resource = loaders.Resource; + const Loader = loaders.Loader; + + Object.defineProperties(Resource.prototype, { + isJson: { + get() + { + warn('The isJson property is deprecated, please use `resource.type === Resource.TYPE.JSON`.'); + + return this.type === Resource.TYPE.JSON; + }, + }, + isXml: { + get() + { + warn('The isXml property is deprecated, please use `resource.type === Resource.TYPE.XML`.'); + + return this.type === Resource.TYPE.XML; + }, + }, + isImage: { + get() + { + warn('The isImage property is deprecated, please use `resource.type === Resource.TYPE.IMAGE`.'); + + return this.type === Resource.TYPE.IMAGE; + }, + }, + isAudio: { + get() + { + warn('The isAudio property is deprecated, please use `resource.type === Resource.TYPE.AUDIO`.'); + + return this.type === Resource.TYPE.AUDIO; + }, + }, + isVideo: { + get() + { + warn('The isVideo property is deprecated, please use `resource.type === Resource.TYPE.VIDEO`.'); + + return this.type === Resource.TYPE.VIDEO; + }, + }, + }); + + Object.defineProperties(Loader.prototype, { + before: { + get() + { + warn('The before() method is deprecated, please use pre().'); + + return this.pre; + }, + }, + after: { + get() + { + warn('The after() method is deprecated, please use use().'); + + return this.use; + }, + }, + }); + } + + if (interaction.interactiveTarget) + { + /** + * @name PIXI.interaction.interactiveTarget#defaultCursor + * @static + * @type {number} + * @see PIXI.interaction.interactiveTarget#cursor + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { + set(value) + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + this.cursor = value; + }, + get() + { + warn('Property defaultCursor has been replaced with \'cursor\'. '); + + return this.cursor; + }, + }); + } + + if (interaction.InteractionManager) + { + /** + * @name PIXI.interaction.InteractionManager#defaultCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { + set(value) + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + this.cursorStyles.default = value; + }, + get() + { + warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); + + return this.cursorStyles.default; + }, + }); + + /** + * @name PIXI.interaction.InteractionManager#currentCursorStyle + * @static + * @type {string} + * @see PIXI.interaction.InteractionManager#cursorStyles + * @deprecated since 4.3.0 + */ + Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { + set(value) + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + this.currentCursorMode = value; + }, + get() + { + warn('Property currentCursorStyle has been removed.' + + 'See the currentCursorMode property, which works differently.'); + + return this.currentCursorMode; + }, + }); + } } - -/** - * @name PIXI.interaction.interactiveTarget#defaultCursor - * @static - * @type {number} - * @see PIXI.interaction.interactiveTarget#cursor - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.interactiveTarget, 'defaultCursor', { - set(value) - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - this.cursor = value; - }, - get() - { - warn('Property defaultCursor has been replaced with \'cursor\'. '); - - return this.cursor; - }, - enumerable: true, -}); - -/** - * @name PIXI.interaction.InteractionManager#defaultCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'defaultCursorStyle', { - set(value) - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - this.cursorStyles.default = value; - }, - get() - { - warn('Property defaultCursorStyle has been replaced with \'cursorStyles.default\'. '); - - return this.cursorStyles.default; - }, -}); - -/** - * @name PIXI.interaction.InteractionManager#currentCursorStyle - * @static - * @type {string} - * @see PIXI.interaction.InteractionManager#cursorStyles - * @deprecated since 4.3.0 - */ -Object.defineProperty(interaction.InteractionManager, 'currentCursorStyle', { - set(value) - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - this.currentCursorMode = value; - }, - get() - { - warn('Property currentCursorStyle has been removed.' - + 'See the currentCursorMode property, which works differently.'); - - return this.currentCursorMode; - }, -}); diff --git a/src/extras/AnimatedSprite.js b/src/extras/AnimatedSprite.js index 5297778..c605fa8 100644 --- a/src/extras/AnimatedSprite.js +++ b/src/extras/AnimatedSprite.js @@ -32,7 +32,7 @@ /** * @param {PIXI.Texture[]|FrameObject[]} textures - an array of {@link PIXI.Texture} or frame * objects that make up the animation - * @param {boolean} [autoUpdate=true] - Whether use PIXI.ticker.shared to auto update animation time. + * @param {boolean} [autoUpdate=true] - Whether to use PIXI.ticker.shared to auto update animation time. */ constructor(textures, autoUpdate) { @@ -88,6 +88,13 @@ */ this.onFrameChange = null; + /** + * Function to call when 'loop' is true, and an AnimatedSprite is played and loops around to start again + * + * @member {Function} + */ + this.onLoop = null; + /** * Elapsed time since animation has been started, used internally to display current texture * @@ -239,6 +246,18 @@ } else if (previousFrame !== this.currentFrame) { + if (this.loop && this.onLoop) + { + if (this.animationSpeed > 0 && this.currentFrame < previousFrame) + { + this.onLoop(); + } + else if (this.animationSpeed < 0 && this.currentFrame > previousFrame) + { + this.onLoop(); + } + } + this.updateTexture(); } } @@ -252,6 +271,7 @@ { this._texture = this._textures[this.currentFrame]; this._textureID = -1; + this.cachedTint = 0xFFFFFF; if (this.onFrameChange) { @@ -262,11 +282,17 @@ /** * Stops the AnimatedSprite and destroys it * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { this.stop(); - super.destroy(); + super.destroy(options); } /** @@ -348,6 +374,8 @@ this._durations.push(value[i].time); } } + this.gotoAndStop(0); + this.updateTexture(); } /** diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 0a0e150..0592b54 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -1,5 +1,6 @@ import * as core from '../core'; import ObservablePoint from '../core/math/ObservablePoint'; +import settings from '../core/settings'; /** * A BitmapText object will create a line or multiple lines of text using bitmap font. To @@ -95,16 +96,18 @@ * Disable by setting value to 0 * * @member {number} + * @private */ - this.maxWidth = 0; + this._maxWidth = 0; /** * The max line height. This is useful when trying to use the total height of the Text, * ie: when trying to vertically align. * * @member {number} + * @private */ - this.maxLineHeight = 0; + this._maxLineHeight = 0; /** * Text anchor. read-only @@ -143,6 +146,7 @@ let line = 0; let lastSpace = -1; let lastSpaceWidth = 0; + let spacesRemoved = 0; let maxLineHeight = 0; for (let i = 0; i < this.text.length; i++) @@ -167,11 +171,12 @@ continue; } - if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth) + if (lastSpace !== -1 && this._maxWidth > 0 && pos.x * scale > this._maxWidth) { - core.utils.removeItems(chars, lastSpace, i - lastSpace); + core.utils.removeItems(chars, lastSpace - spacesRemoved, i - lastSpace); i = lastSpace; lastSpace = -1; + ++spacesRemoved; lineWidths.push(lastSpaceWidth); maxLineWidth = Math.max(maxLineWidth, lastSpaceWidth); @@ -274,7 +279,7 @@ this._glyphs[i].y -= this._textHeight * this.anchor.y; } } - this.maxLineHeight = maxLineHeight * scale; + this._maxLineHeight = maxLineHeight * scale; } /** @@ -429,6 +434,42 @@ } /** + * The max width of this bitmap text in pixels. If the text provided is longer than the + * value provided, line breaks will be automatically inserted in the last whitespace. + * Disable by setting value to 0 + * + * @member {number} + */ + get maxWidth() + { + return this._maxWidth; + } + + set maxWidth(value) // eslint-disable-line require-jsdoc + { + if (this._maxWidth === value) + { + return; + } + this._maxWidth = value; + this.dirty = true; + } + + /** + * The max line height. This is useful when trying to use the total height of the Text, + * ie: when trying to vertically align. + * + * @member {number} + * @readonly + */ + get maxLineHeight() + { + this.validate(); + + return this._maxLineHeight; + } + + /** * The width of the overall text, different from fontSize, * which is defined in the style object * @@ -469,10 +510,11 @@ const data = {}; const info = xml.getElementsByTagName('info')[0]; const common = xml.getElementsByTagName('common')[0]; + const res = texture.baseTexture.resolution || settings.RESOLUTION; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); - data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10); + data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) / res; data.chars = {}; // parse letters @@ -484,16 +526,16 @@ const charCode = parseInt(letter.getAttribute('id'), 10); const textureRect = new core.Rectangle( - parseInt(letter.getAttribute('x'), 10) + texture.frame.x, - parseInt(letter.getAttribute('y'), 10) + texture.frame.y, - parseInt(letter.getAttribute('width'), 10), - parseInt(letter.getAttribute('height'), 10) + (parseInt(letter.getAttribute('x'), 10) / res) + (texture.frame.x / res), + (parseInt(letter.getAttribute('y'), 10) / res) + (texture.frame.y / res), + parseInt(letter.getAttribute('width'), 10) / res, + parseInt(letter.getAttribute('height'), 10) / res ); data.chars[charCode] = { - xOffset: parseInt(letter.getAttribute('xoffset'), 10), - yOffset: parseInt(letter.getAttribute('yoffset'), 10), - xAdvance: parseInt(letter.getAttribute('xadvance'), 10), + xOffset: parseInt(letter.getAttribute('xoffset'), 10) / res, + yOffset: parseInt(letter.getAttribute('yoffset'), 10) / res, + xAdvance: parseInt(letter.getAttribute('xadvance'), 10) / res, kerning: {}, texture: new core.Texture(texture.baseTexture, textureRect), @@ -506,9 +548,9 @@ for (let i = 0; i < kernings.length; i++) { const kerning = kernings[i]; - const first = parseInt(kerning.getAttribute('first'), 10); - const second = parseInt(kerning.getAttribute('second'), 10); - const amount = parseInt(kerning.getAttribute('amount'), 10); + const first = parseInt(kerning.getAttribute('first'), 10) / res; + const second = parseInt(kerning.getAttribute('second'), 10) / res; + const amount = parseInt(kerning.getAttribute('amount'), 10) / res; if (data.chars[second]) { diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index a3f027f..edf0942 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -136,6 +136,7 @@ { this.uvTransform.texture = this._texture; } + this.cachedTint = 0xFFFFFF; } /** @@ -185,9 +186,9 @@ const modY = ((this.tilePosition.y / this.tileScale.y) % texture._frame.height) * baseTextureResolution; // create a nice shiny pattern! - // TODO this needs to be refreshed if texture changes.. - if (!this._canvasPattern) + if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { + this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height, @@ -196,18 +197,15 @@ // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { - if (this.cachedTint !== this.tint) - { - this.cachedTint = this.tint; - - this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); - } + this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { - tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x, -texture._frame.y); + tempCanvas.context.drawImage(baseTexture.source, + -texture._frame.x * baseTextureResolution, -texture._frame.y * baseTextureResolution); } + this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } @@ -310,11 +308,11 @@ const height = this._height; const x1 = -width * this.anchor._x; - if (tempPoint.x > x1 && tempPoint.x < x1 + width) + if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; - if (tempPoint.y > y1 && tempPoint.y < y1 + height) + if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } @@ -324,12 +322,18 @@ } /** - * Destroys this tiling sprite + * Destroys this sprite and optionally its texture and children * + * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options + * have been set to that value + * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy + * method called as well. 'options' will be passed on to those calls. + * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well + * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ - destroy() + destroy(options) { - super.destroy(); + super.destroy(options); this.tileTransform = null; this.uvTransform = null; diff --git a/src/extras/index.js b/src/extras/index.js index a34d7ec..5b98cb1 100644 --- a/src/extras/index.js +++ b/src/extras/index.js @@ -3,6 +3,7 @@ * @namespace PIXI.extras */ export { default as AnimatedSprite } from './AnimatedSprite'; +export { default as TextureTransform } from './TextureTransform'; export { default as TilingSprite } from './TilingSprite'; export { default as TilingSpriteRenderer } from './webgl/TilingSpriteRenderer'; export { default as BitmapText } from './BitmapText'; diff --git a/src/extras/webgl/tilingSprite.frag b/src/extras/webgl/tilingSprite.frag index 3caa383..5f695a5 100644 --- a/src/extras/webgl/tilingSprite.frag +++ b/src/extras/webgl/tilingSprite.frag @@ -13,7 +13,5 @@ coord = clamp(coord, uClampFrame.xy, uClampFrame.zw); vec4 sample = texture2D(uSampler, coord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - - gl_FragColor = sample * color ; + gl_FragColor = sample * uColor; } diff --git a/src/extras/webgl/tilingSprite_simple.frag b/src/extras/webgl/tilingSprite_simple.frag index 6675bf3..4c902e6 100644 --- a/src/extras/webgl/tilingSprite_simple.frag +++ b/src/extras/webgl/tilingSprite_simple.frag @@ -6,6 +6,5 @@ void main(void) { vec4 sample = texture2D(uSampler, vTextureCoord); - vec4 color = vec4(uColor.rgb * uColor.a, uColor.a); - gl_FragColor = sample * color; + gl_FragColor = sample * uColor; } diff --git a/src/filters/alpha/AlphaFilter.js b/src/filters/alpha/AlphaFilter.js new file mode 100644 index 0000000..c2824ed --- /dev/null +++ b/src/filters/alpha/AlphaFilter.js @@ -0,0 +1,55 @@ +import * as core from '../../core'; +import { readFileSync } from 'fs'; +import { join } from 'path'; + +/** + * Simplest filter - applies alpha + * + * Use this instead of Container's alpha property to avoid visual layering of individual elements. + * AlphaFilter applies alpha evenly across the entire display object and any opaque elements it contains. + * If elements are not opaque, they will blend with each other anyway. + * + * Very handy if you want to use common features of all filters: + * + * 1. Assign a blendMode to this filter, blend all elements inside display object with background. + * + * 2. To use clipping in display coordinates, assign a filterArea to the same container that has this filter. + * + * @class + * @extends PIXI.Filter + * @memberof PIXI.filters + */ +export default class AlphaFilter extends core.Filter +{ + /** + * + */ + constructor() + { + super( + // vertex shader + readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), + // fragment shader + readFileSync(join(__dirname, './alpha.frag'), 'utf8') + ); + + this.alpha = 1.0; + this.glShaderKey = 'alpha'; + } + + /** + * Coefficient for alpha multiplication + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } +} diff --git a/src/filters/alpha/alpha.frag b/src/filters/alpha/alpha.frag new file mode 100644 index 0000000..6db588c --- /dev/null +++ b/src/filters/alpha/alpha.frag @@ -0,0 +1,9 @@ +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; +uniform float uAlpha; + +void main(void) +{ + gl_FragColor = texture2D(uSampler, vTextureCoord) * uAlpha; +} diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 1575db9..f758afe 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -114,4 +114,20 @@ this.blurYFilter.blur = value; this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2; } + + /** + * Sets the blendmode of the filter + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL + */ + get blendMode() + { + return this.blurYFilter._blendMode; + } + + set blendMode(value) // eslint-disable-line require-jsdoc + { + this.blurYFilter._blendMode = value; + } } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e1d647a 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -242,7 +244,7 @@ contrast(amount, multiply) { const v = (amount || 0) + 1; - const o = -128 * (v - 1); + const o = -0.5 * (v - 1); const matrix = [ v, 0, 0, 0, o, @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); } diff --git a/src/filters/index.js b/src/filters/index.js index 7ceb50a..dca47ab 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -25,4 +25,4 @@ export { default as BlurXFilter } from './blur/BlurXFilter'; export { default as BlurYFilter } from './blur/BlurYFilter'; export { default as ColorMatrixFilter } from './colormatrix/ColorMatrixFilter'; -export { default as VoidFilter } from './void/VoidFilter'; +export { default as AlphaFilter } from './alpha/AlphaFilter'; diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; } diff --git a/src/filters/void/VoidFilter.js b/src/filters/void/VoidFilter.js deleted file mode 100644 index b4361ac..0000000 --- a/src/filters/void/VoidFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as core from '../../core'; -import { readFileSync } from 'fs'; -import { join } from 'path'; - -/** - * Does nothing. Very handy. - * - * @class - * @extends PIXI.Filter - * @memberof PIXI.filters - */ -export default class VoidFilter extends core.Filter -{ - /** - * - */ - constructor() - { - super( - // vertex shader - readFileSync(join(__dirname, '../fragments/default.vert'), 'utf8'), - // fragment shader - readFileSync(join(__dirname, './void.frag'), 'utf8') - ); - - this.glShaderKey = 'void'; - } -} diff --git a/src/filters/void/void.frag b/src/filters/void/void.frag deleted file mode 100644 index 99168fb..0000000 --- a/src/filters/void/void.frag +++ /dev/null @@ -1,8 +0,0 @@ -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - -void main(void) -{ - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/index.js b/src/index.js index fe1d592..b49118a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,10 +2,10 @@ export * from './polyfill'; // export core -export * from './deprecation'; export * from './core'; // export libs +import deprecation from './deprecation'; import * as accessibility from './accessibility'; import * as extract from './extract'; import * as extras from './extras'; @@ -41,5 +41,12 @@ loader, }; -// Always export pixi globally. +// Apply the deprecations +if (typeof deprecation === 'function') +{ + deprecation(exports); +} + +// Always export PixiJS globally. global.PIXI = exports; // eslint-disable-line + diff --git a/src/interaction/InteractionData.js b/src/interaction/InteractionData.js index 449f8cc..205c9a8 100644 --- a/src/interaction/InteractionData.js +++ b/src/interaction/InteractionData.js @@ -36,6 +36,111 @@ * @member {MouseEvent|TouchEvent|PointerEvent} */ this.originalEvent = null; + + /** + * Unique identifier for this interaction + * + * @member {number} + */ + this.identifier = null; + + /** + * Indicates whether or not the pointer device that created the event is the primary pointer. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary + * @type {Boolean} + */ + this.isPrimary = false; + + /** + * Indicates which button was pressed on the mouse or pointer device to trigger the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button + * @type {number} + */ + this.button = 0; + + /** + * Indicates which buttons are pressed on the mouse or pointer device when the event is triggered. + * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons + * @type {number} + */ + this.buttons = 0; + + /** + * The width of the pointer's contact along the x-axis, measured in CSS pixels. + * radiusX of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width + * @type {number} + */ + this.width = 0; + + /** + * The height of the pointer's contact along the y-axis, measured in CSS pixels. + * radiusY of TouchEvents will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height + * @type {number} + */ + this.height = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX + * @type {number} + */ + this.tiltX = 0; + + /** + * The angle, in degrees, between the pointer device and the screen. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY + * @type {number} + */ + this.tiltY = 0; + + /** + * The type of pointer that triggered the event. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType + * @type {string} + */ + this.pointerType = null; + + /** + * Pressure applied by the pointing device during the event. A Touch's force property + * will be represented by this value. + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure + * @type {number} + */ + this.pressure = 0; + + /** + * From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle + * @type {number} + */ + this.rotationAngle = 0; + + /** + * Twist of a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.twist = 0; + + /** + * Barrel pressure on a stylus pointer. + * @see https://w3c.github.io/pointerevents/#pointerevent-interface + * @type {number} + */ + this.tangentialPressure = 0; + } + + /** + * The unique identifier of the pointer. It will be the same as `identifier`. + * @readonly + * @member {number} + * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId + */ + get pointerId() + { + return this.identifier; } /** @@ -54,4 +159,44 @@ { return displayObject.worldTransform.applyInverse(globalPos || this.global, point); } + + /** + * Copies properties from normalized event data. + * + * @param {Touch|MouseEvent|PointerEvent} event The normalized event data + * @private + */ + _copyEvent(event) + { + // isPrimary should only change on touchstart/pointerdown, so we don't want to overwrite + // it with "false" on later events when our shim for it on touch events might not be + // accurate + if (event.isPrimary) + { + this.isPrimary = true; + } + this.button = event.button; + this.buttons = event.buttons; + this.width = event.width; + this.height = event.height; + this.tiltX = event.tiltX; + this.tiltY = event.tiltY; + this.pointerType = event.pointerType; + this.pressure = event.pressure; + this.rotationAngle = event.rotationAngle; + this.twist = event.twist || 0; + this.tangentialPressure = event.tangentialPressure || 0; + } + + /** + * Resets the data for pooling. + * + * @private + */ + _reset() + { + // isPrimary is the only property that we really need to reset - everything else is + // guaranteed to be overwritten + this.isPrimary = false; + } } diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index e1c50d7..0c737f9 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -121,7 +121,7 @@ * is over the object. * Setting to true will make things work more in line with how the DOM verison works. * Setting to false can make things easier for things like dragging - * It is currently set to false as this is how pixi used to work. This will be set to true in + * It is currently set to false as this is how PixiJS used to work. This will be set to true in * future versions of pixi. * * @member {boolean} @@ -732,7 +732,6 @@ window.addEventListener('pointercancel', this.onPointerCancel, true); window.addEventListener('pointerup', this.onPointerUp, true); } - else { window.document.addEventListener('mousemove', this.onPointerMove, true); @@ -740,14 +739,17 @@ this.interactionDOMElement.addEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.addEventListener('mouseover', this.onPointerOver, true); window.addEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); - } + // always look directly for touch events so that we can provide original data + // In a future version we should change this to being just a fallback and rely solely on + // PointerEvents whenever available + if (this.supportsTouchEvents) + { + this.interactionDOMElement.addEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.addEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.addEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.addEventListener('touchmove', this.onPointerMove, true); } this.eventsAdded = true; @@ -793,14 +795,14 @@ this.interactionDOMElement.removeEventListener('mouseout', this.onPointerOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onPointerOver, true); window.removeEventListener('mouseup', this.onPointerUp, true); + } - if (this.supportsTouchEvents) - { - this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); - this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); - this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); - } + if (this.supportsTouchEvents) + { + this.interactionDOMElement.removeEventListener('touchstart', this.onPointerDown, true); + this.interactionDOMElement.removeEventListener('touchcancel', this.onPointerCancel, true); + this.interactionDOMElement.removeEventListener('touchend', this.onPointerUp, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onPointerMove, true); } this.interactionDOMElement = null; @@ -909,6 +911,12 @@ break; } } + else if (typeof mode === 'string' && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) + { + // if it mode is a string (not a Symbol) and cursorStyles doesn't have any entry + // for the mode, then assume that the dev wants it to be CSS for the cursor. + this.interactionDOMElement.style.cursor = mode; + } } /** @@ -936,7 +944,7 @@ } /** - * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The + * Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The * resulting value is stored in the point. This takes into account the fact that the DOM * element could be scaled and positioned anywhere on the screen. * @@ -1023,7 +1031,7 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it // (such as a game scene!) set interactiveChildren to false for that displayObject. - // This will allow pixi to completely ignore and bypass checking the displayObjects children. + // This will allow PixiJS to completely ignore and bypass checking the displayObjects children. if (displayObject.interactiveChildren && displayObject.children) { const children = displayObject.children; @@ -1116,6 +1124,9 @@ */ onPointerDown(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); /** @@ -1150,9 +1161,10 @@ { this.emit('touchstart', interactionEvent); } - else if (event.pointerType === 'mouse') + // emit a mouse event for "pen" pointers, the way a browser would emit a fallback event + else if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -1169,8 +1181,7 @@ */ processPointerDown(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; - + const data = interactionEvent.data; const id = interactionEvent.data.identifier; if (hit) @@ -1181,13 +1192,13 @@ } this.dispatchEvent(displayObject, 'pointerdown', interactionEvent); - if (e.type === 'touchstart' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchstart', interactionEvent); } - else if (e.type === 'mousedown' || e.pointerType === 'mouse') + else if (data.pointerType === 'mouse' || data.pointerType === 'pen') { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; if (isRightButton) { @@ -1217,6 +1228,10 @@ const eventLen = events.length; + // if the event wasn't targeting our canvas, then consider it to be pointerupoutside + // in all cases (unless it was a pointercancel) + const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + for (let i = 0; i < eventLen; i++) { const event = events[i]; @@ -1227,19 +1242,20 @@ interactionEvent.data.originalEvent = originalEvent; - this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, true); + // perform hit testing for events targeting our canvas or cancel events + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend); - this.emit(cancelled ? 'pointercancel' : 'pointerup', interactionEvent); + this.emit(cancelled ? 'pointercancel' : `pointerup${eventAppend}`, interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { - const isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2; - this.emit(isRightButton ? 'rightup' : 'mouseup', interactionEvent); + this.emit(isRightButton ? `rightup${eventAppend}` : `mouseup${eventAppend}`, interactionEvent); } else if (event.pointerType === 'touch') { - this.emit(cancelled ? 'touchcancel' : 'touchend', interactionEvent); + this.emit(cancelled ? 'touchcancel' : `touchend${eventAppend}`, interactionEvent); this.releaseInteractionDataForPointerId(event.pointerId, interactionData); } } @@ -1253,6 +1269,9 @@ */ onPointerCancel(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, true, this.processPointerCancel); } @@ -1265,7 +1284,7 @@ */ processPointerCancel(interactionEvent, displayObject) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; @@ -1274,7 +1293,7 @@ delete displayObject.trackedPointers[id]; this.dispatchEvent(displayObject, 'pointercancel', interactionEvent); - if (e.type === 'touchcancel' || e.pointerType === 'touch') + if (data.pointerType === 'touch') { this.dispatchEvent(displayObject, 'touchcancel', interactionEvent); } @@ -1289,6 +1308,9 @@ */ onPointerUp(event) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && event.pointerType === 'touch') return; + this.onPointerComplete(event, false, this.processPointerUp); } @@ -1302,20 +1324,20 @@ */ processPointerUp(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; const trackingData = displayObject.trackedPointers[id]; - const isTouch = (e.type === 'touchend' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type.indexOf('mouse') === 0 || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); // Mouse only if (isMouse) { - const isRightButton = e.button === 2 || e.which === 3; + const isRightButton = data.button === 2; const flags = InteractionTrackingData.FLAGS; @@ -1388,6 +1410,9 @@ */ onPointerMove(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); if (events[0].pointerType === 'mouse') @@ -1419,7 +1444,7 @@ ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); - if (event.pointerType === 'mouse') this.emit('mousemove', interactionEvent); + if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); } if (events[0].pointerType === 'mouse') @@ -1440,11 +1465,11 @@ */ processPointerMove(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; - const isTouch = (e.type === 'touchmove' || e.pointerType === 'touch'); + const isTouch = data.pointerType === 'touch'; - const isMouse = (e.type === 'mousemove' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); if (isMouse) { @@ -1467,6 +1492,9 @@ */ onPointerOut(originalEvent) { + // if we support touch events, then only use those for touch events, not pointer events + if (this.supportsTouchEvents && originalEvent.pointerType === 'touch') return; + const events = this.normalizeToPointerData(originalEvent); // Only mouse and pointer can call onPointerOut, so events will always be length 1 @@ -1487,7 +1515,7 @@ this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerOverOut, false); this.emit('pointerout', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseout', interactionEvent); } @@ -1509,11 +1537,11 @@ */ processPointerOverOut(interactionEvent, displayObject, hit) { - const e = interactionEvent.data.originalEvent; + const data = interactionEvent.data; const id = interactionEvent.data.identifier; - const isMouse = (e.type === 'mouseover' || e.type === 'mouseout' || e.pointerType === 'mouse'); + const isMouse = (data.pointerType === 'mouse' || data.pointerType === 'pen'); let trackingData = displayObject.trackedPointers[id]; @@ -1585,7 +1613,7 @@ } this.emit('pointerover', interactionEvent); - if (event.pointerType === 'mouse') + if (event.pointerType === 'mouse' || event.pointerType === 'pen') { this.emit('mouseover', interactionEvent); } @@ -1602,19 +1630,25 @@ { const pointerId = event.pointerId; + let interactionData; + if (pointerId === MOUSE_POINTER_ID || event.pointerType === 'mouse') { - return this.mouse; + interactionData = this.mouse; } else if (this.activeInteractionData[pointerId]) { - return this.activeInteractionData[pointerId]; + interactionData = this.activeInteractionData[pointerId]; } - - const interactionData = this.interactionDataPool.pop() || new InteractionData(); - - interactionData.identifier = pointerId; - this.activeInteractionData[pointerId] = interactionData; + else + { + interactionData = this.interactionDataPool.pop() || new InteractionData(); + interactionData.identifier = pointerId; + this.activeInteractionData[pointerId] = interactionData; + } + // copy properties from the event, so that we can make sure that touch/pointer specific + // data is available + interactionData._copyEvent(event); return interactionData; } @@ -1632,6 +1666,7 @@ if (interactionData) { delete this.activeInteractionData[pointerId]; + interactionData._reset(); this.interactionDataPool.push(interactionData); } } @@ -1694,7 +1729,10 @@ if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0; if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0; - if (typeof touch.isPrimary === 'undefined') touch.isPrimary = event.touches.length === 1; + if (typeof touch.isPrimary === 'undefined') + { + touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart'; + } if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1; if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1; if (typeof touch.tiltX === 'undefined') touch.tiltX = 0; @@ -1702,8 +1740,12 @@ if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch'; if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0; if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5; - if (typeof touch.rotation === 'undefined') touch.rotation = touch.rotationAngle || 0; - + touch.twist = 0; + touch.tangentialPressure = 0; + // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven + // support, and the fill ins are not quite the same + // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top + // left is not 0,0 on the page if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX; if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY; @@ -1724,7 +1766,8 @@ if (typeof event.pointerType === 'undefined') event.pointerType = 'mouse'; if (typeof event.pointerId === 'undefined') event.pointerId = MOUSE_POINTER_ID; if (typeof event.pressure === 'undefined') event.pressure = 0.5; - if (typeof event.rotation === 'undefined') event.rotation = 0; + event.twist = 0; + event.tangentialPressure = 0; // mark the mouse event as normalized, just so that we know we did it event.isNormalized = true; diff --git a/src/interaction/index.js b/src/interaction/index.js index 72f7d71..d3f4af5 100644 --- a/src/interaction/index.js +++ b/src/interaction/index.js @@ -8,3 +8,5 @@ export { default as InteractionData } from './InteractionData'; export { default as InteractionManager } from './InteractionManager'; export { default as interactiveTarget } from './interactiveTarget'; +export { default as InteractionTrackingData } from './InteractionTrackingData'; +export { default as InteractionEvent } from './InteractionEvent'; diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index cebac40..b2affa1 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -32,7 +32,7 @@ /** * Determines if the children to the displayObject can be clicked/touched - * Setting this to false allows pixi to bypass a recursive `hitTest` function + * Setting this to false allows PixiJS to bypass a recursive `hitTest` function * * @member {boolean} * @memberof PIXI.Container# diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index f4cf996..9691dd0 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -55,12 +55,12 @@ { xmlUrl += '/'; } - - // remove baseUrl from xmlUrl - xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } + // remove baseUrl from xmlUrl + xmlUrl = xmlUrl.replace(this.baseUrl, ''); + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { diff --git a/src/loaders/index.js b/src/loaders/index.js index daa1fc4..6c3242a 100644 --- a/src/loaders/index.js +++ b/src/loaders/index.js @@ -69,12 +69,12 @@ // Override the destroy function // making sure to destroy the current Loader AppPrototype._parentDestroy = AppPrototype.destroy; -AppPrototype.destroy = function destroy() +AppPrototype.destroy = function destroy(removeView) { if (this._loader) { this._loader.destroy(); this._loader = null; } - this._parentDestroy(); + this._parentDestroy(removeView); }; diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 59b8000..93356a3 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -10,7 +10,7 @@ * The new loader, extends Resource Loader by Chad Engler: https://github.com/englercj/resource-loader * * ```js - * const loader = PIXI.loader; // pixi exposes a premade instance for you to use. + * const loader = PIXI.loader; // PixiJS exposes a premade instance for you to use. * //or * const loader = new PIXI.loaders.Loader(); // you can also create your own if you want * @@ -81,7 +81,7 @@ } /** - * Adds a default middleware to the pixi loader. + * Adds a default middleware to the PixiJS loader. * * @static * @param {Function} fn - The middleware to add. diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index c243246..f0d7575 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -46,16 +46,8 @@ { super(texture, 4, 4); - const uvs = this.uvs; - - // right and bottom uv's are always 1 - uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; - uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; - this._origWidth = texture.orig.width; this._origHeight = texture.orig.height; - this._uvw = 1 / this._origWidth; - this._uvh = 1 / this._origHeight; /** * The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -64,7 +56,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.width = this._origWidth; + this._width = this._origWidth; /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -73,12 +65,7 @@ * @memberof PIXI.NineSlicePlane# * @override */ - this.height = this._origHeight; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * leftWidth; - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * rightWidth); - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * topHeight; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * bottomHeight); + this._height = this._origHeight; /** * The width of the left column (a) @@ -185,8 +172,8 @@ const base = this._texture.baseTexture; const textureSource = base.source; - const w = base.width; - const h = base.height; + const w = base.width * base.resolution; + const h = base.height * base.resolution; this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); @@ -264,7 +251,7 @@ set width(value) // eslint-disable-line require-jsdoc { this._width = value; - this.updateVerticalVertices(); + this._refresh(); } /** @@ -280,7 +267,7 @@ set height(value) // eslint-disable-line require-jsdoc { this._height = value; - this.updateHorizontalVertices(); + this._refresh(); } /** @@ -296,14 +283,7 @@ set leftWidth(value) // eslint-disable-line require-jsdoc { this._leftWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; - vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; - - this.dirty = true; + this._refresh(); } /** @@ -319,14 +299,7 @@ set rightWidth(value) // eslint-disable-line require-jsdoc { this._rightWidth = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (this._uvw * value); - vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; - - this.dirty = true; + this._refresh(); } /** @@ -342,14 +315,7 @@ set topHeight(value) // eslint-disable-line require-jsdoc { this._topHeight = value; - - const uvs = this.uvs; - const vertices = this.vertices; - - uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; - vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; - - this.dirty = true; + this._refresh(); } /** @@ -365,13 +331,40 @@ set bottomHeight(value) // eslint-disable-line require-jsdoc { this._bottomHeight = value; + this._refresh(); + } + + /** + * Refreshes NineSlicePlane coords. All of them. + */ + _refresh() + { + super._refresh(); const uvs = this.uvs; - const vertices = this.vertices; + const texture = this._texture; - uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (this._uvh * value); - vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; + this._origWidth = texture.orig.width; + this._origHeight = texture.orig.height; - this.dirty = true; + const _uvw = 1.0 / this._origWidth; + const _uvh = 1.0 / this._origHeight; + + uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0; + uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0; + uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; + uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; + + uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth; + uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - (_uvw * this._rightWidth); + uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight; + uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - (_uvh * this._bottomHeight); + + this.updateHorizontalVertices(); + this.updateVerticalVertices(); + + this.dirty++; + + this.multiplyUvs(); } } diff --git a/src/mesh/canvas/CanvasMeshRenderer.js b/src/mesh/canvas/CanvasMeshRenderer.js index f7899e1..b35e897 100644 --- a/src/mesh/canvas/CanvasMeshRenderer.js +++ b/src/mesh/canvas/CanvasMeshRenderer.js @@ -243,6 +243,7 @@ ); context.restore(); + this.renderer.invalidateBlendMode(); } /** diff --git a/src/mesh/webgl/mesh.frag b/src/mesh/webgl/mesh.frag index de41551..e6df86f 100644 --- a/src/mesh/webgl/mesh.frag +++ b/src/mesh/webgl/mesh.frag @@ -1,10 +1,9 @@ varying vec2 vTextureCoord; -uniform float alpha; -uniform vec3 tint; +uniform vec4 uColor; uniform sampler2D uSampler2; void main(void) { - gl_FragColor = texture2D(uSampler2, vTextureCoord) * vec4(tint * alpha, alpha); + gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; } diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 63f7791..233ee3b 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -1,4 +1,5 @@ import * as core from '../core'; +import { hex2rgb } from '../core/utils'; /** * The ParticleContainer class is a really fast version of the Container built solely for speed, @@ -18,7 +19,7 @@ * } * ``` * - * And here you have a hundred sprites that will be renderer at the speed of light. + * And here you have a hundred sprites that will be rendered at the speed of light. * * @class * @extends PIXI.Container @@ -27,16 +28,19 @@ export default class ParticleContainer extends core.Container { /** - * @param {number} [maxSize=15000] - The maximum number of particles that can be renderer by the container. + * @param {number} [maxSize=1500] - The maximum number of particles that can be rendered by the container. + * Affects size of allocated buffers. * @param {object} [properties] - The properties of children that should be uploaded to the gpu and applied. * @param {boolean} [properties.scale=false] - When true, scale be uploaded and applied. * @param {boolean} [properties.position=true] - When true, position be uploaded and applied. * @param {boolean} [properties.rotation=false] - When true, rotation be uploaded and applied. * @param {boolean} [properties.uvs=false] - When true, uvs be uploaded and applied. - * @param {boolean} [properties.alpha=false] - When true, alpha be uploaded and applied. - * @param {number} [batchSize=15000] - Number of particles per batch. + * @param {boolean} [properties.tint=false] - When true, alpha and tint be uploaded and applied. + * @param {number} [batchSize=16384] - Number of particles per batch. If less than maxSize, it uses maxSize instead. + * @param {boolean} [autoResize=true] If true, container allocates more batches in case + * there are more than `maxSize` particles. */ - constructor(maxSize = 1500, properties, batchSize = 16384) + constructor(maxSize = 1500, properties, batchSize = 16384, autoResize = false) { super(); @@ -104,6 +108,13 @@ this.blendMode = core.BLEND_MODES.NORMAL; /** + * If true, container allocates more batches in case there are more than `maxSize` particles. + * @member {boolean} + * @default false + */ + this.autoResize = autoResize; + + /** * Used for canvas renderering. If true then the elements will be positioned at the * nearest pixel. This provides a nice speed boost. * @@ -121,6 +132,18 @@ this.baseTexture = null; this.setProperties(properties); + + /** + * The tint applied to the container. + * This is a hex value. A value of 0xFFFFFF will remove any tint effect. + * + * @private + * @member {number} + * @default 0xFFFFFF + */ + this._tint = 0; + this.tintRgb = new Float32Array(4); + this.tint = 0xFFFFFF; } /** @@ -136,7 +159,8 @@ this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3]; - this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4]; + this._properties[4] = 'alpha' in properties || 'tint' in properties + ? !!properties.alpha || !!properties.tint : this._properties[4]; } } @@ -153,6 +177,24 @@ } /** + * The tint applied to the container. This is a hex value. + * A value of 0xFFFFFF will remove any tint effect. + ** IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * @member {number} + * @default 0xFFFFFF + */ + get tint() + { + return this._tint; + } + + set tint(value) // eslint-disable-line require-jsdoc + { + this._tint = value; + hex2rgb(value, this.tintRgb); + } + + /** * Renders the container using the WebGL renderer * * @private @@ -217,12 +259,7 @@ let finalWidth = 0; let finalHeight = 0; - const compositeOperation = renderer.blendModes[this.blendMode]; - - if (compositeOperation !== context.globalCompositeOperation) - { - context.globalCompositeOperation = compositeOperation; - } + renderer.setBlendMode(this.blendMode); context.globalAlpha = this.worldAlpha; diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 24a6f9b..7530c9b 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -7,7 +7,7 @@ * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that * they now share 4 bytes on the vertex buffer * @@ -40,20 +40,6 @@ this.gl = gl; /** - * Size of a single vertex. - * - * @member {number} - */ - this.vertSize = 2; - - /** - * Size of a single vertex in bytes. - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** * The number of particles the buffer can hold * * @member {number} @@ -84,6 +70,7 @@ attribute: property.attribute, size: property.size, uploadFunction: property.uploadFunction, + unsignedByte: property.unsignedByte, offset: property.offset, }; @@ -100,10 +87,12 @@ this.staticStride = 0; this.staticBuffer = null; this.staticData = null; + this.staticDataUint32 = null; this.dynamicStride = 0; this.dynamicBuffer = null; this.dynamicData = null; + this.dynamicDataUint32 = null; this.initBuffers(); } @@ -164,28 +153,56 @@ { const property = this.dynamicProperties[i]; - this.vao.addAttribute( - this.dynamicBuffer, - property.attribute, - gl.FLOAT, - false, - this.dynamicStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.dynamicStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.dynamicBuffer, + property.attribute, + gl.FLOAT, + false, + this.dynamicStride * 4, + property.offset * 4 + ); + } } for (let i = 0; i < this.staticProperties.length; ++i) { const property = this.staticProperties[i]; - this.vao.addAttribute( - this.staticBuffer, - property.attribute, - gl.FLOAT, - false, - this.staticStride * 4, - property.offset * 4 - ); + if (property.unsignedByte) + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.UNSIGNED_BYTE, + true, + this.staticStride * 4, + property.offset * 4 + ); + } + else + { + this.vao.addAttribute( + this.staticBuffer, + property.attribute, + gl.FLOAT, + false, + this.staticStride * 4, + property.offset * 4 + ); + } } } @@ -202,7 +219,9 @@ { const property = this.dynamicProperties[i]; - property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.dynamicDataUint32 : this.dynamicData, + this.dynamicStride, property.offset); } this.dynamicBuffer.upload(); @@ -221,7 +240,9 @@ { const property = this.staticProperties[i]; - property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); + property.uploadFunction(children, startIndex, amount, + property.unsignedByte ? this.staticDataUint32 : this.staticData, + this.staticStride, property.offset); } this.staticBuffer.upload(); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index ffce8ec..d524f61 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -1,12 +1,13 @@ import * as core from '../../core'; import ParticleShader from './ParticleShader'; import ParticleBuffer from './ParticleBuffer'; +import { premultiplyTint } from '../../core/utils'; /** * @author Mat Groves * * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! + * for creating the original PixiJS version! * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now * share 4 bytes on the vertex buffer * @@ -94,11 +95,12 @@ uploadFunction: this.uploadUvs, offset: 0, }, - // alphaData + // tintData { attribute: this.shader.attributes.aColor, size: 1, - uploadFunction: this.uploadAlpha, + unsignedByte: true, + uploadFunction: this.uploadTint, offset: 0, }, ]; @@ -142,8 +144,10 @@ buffers = container._glBuffers[renderer.CONTEXT_UID] = this.generateBuffers(container); } + const baseTexture = children[0]._texture.baseTexture; + // if the uvs have not updated then no point rendering just yet! - this.renderer.setBlendMode(container.blendMode); + this.renderer.setBlendMode(core.utils.correctBlendMode(container.blendMode, baseTexture.premultipliedAlpha)); const gl = renderer.gl; @@ -152,11 +156,11 @@ m.prepend(renderer._activeRenderTarget.projectionMatrix); this.shader.uniforms.projectionMatrix = m.toArray(true); - this.shader.uniforms.uAlpha = container.worldAlpha; + + this.shader.uniforms.uColor = core.utils.premultiplyRgba(container.tintRgb, + container.worldAlpha, this.shader.uniforms.uColor, baseTexture.premultipliedAlpha); // make sure the texture is bound.. - const baseTexture = children[0]._texture.baseTexture; - this.shader.uniforms.uSampler = renderer.bindTexture(baseTexture); // now lets upload and render the buffers.. @@ -169,6 +173,15 @@ amount = batchSize; } + if (j >= buffers.length) + { + if (!container.autoResize) + { + break; + } + buffers.push(this._generateOneMoreBuffer(container)); + } + const buffer = buffers[j]; // we always upload the dynamic @@ -210,6 +223,22 @@ } /** + * Creates one more particle buffer, because container has autoResize feature + * + * @param {PIXI.ParticleContainer} container - The container to render using this ParticleRenderer + * @return {PIXI.ParticleBuffer} generated buffer + * @private + */ + _generateOneMoreBuffer(container) + { + const gl = this.renderer.gl; + const batchSize = container._batchSize; + const dynamicPropertyFlags = container._properties; + + return new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize); + } + + /** * Uploads the verticies. * * @param {PIXI.DisplayObject[]} children - the array of display objects to render @@ -385,16 +414,21 @@ * @param {number} stride - Stride to use for iteration. * @param {number} offset - Offset to start at. */ - uploadAlpha(children, startIndex, amount, array, stride, offset) + uploadTint(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) + for (let i = 0; i < amount; ++i) { - const spriteAlpha = children[startIndex + i].alpha; + const sprite = children[startIndex + i]; + const premultiplied = sprite._texture.baseTexture.premultipliedAlpha; + const alpha = sprite.alpha; + // we dont call extra function if alpha is 1.0, that's faster + const argb = alpha < 1.0 && premultiplied ? premultiplyTint(sprite._tintRGB, alpha) + : sprite._tintRGB + (alpha * 255 << 24); - array[offset] = spriteAlpha; - array[offset + stride] = spriteAlpha; - array[offset + (stride * 2)] = spriteAlpha; - array[offset + (stride * 3)] = spriteAlpha; + array[offset] = argb; + array[offset + stride] = argb; + array[offset + (stride * 2)] = argb; + array[offset + (stride * 3)] = argb; offset += stride * 4; } diff --git a/src/particles/webgl/ParticleShader.js b/src/particles/webgl/ParticleShader.js index 417380e..5b2142d 100644 --- a/src/particles/webgl/ParticleShader.js +++ b/src/particles/webgl/ParticleShader.js @@ -19,16 +19,17 @@ [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute float aColor;', + 'attribute vec4 aColor;', 'attribute vec2 aPositionCoord;', 'attribute vec2 aScale;', 'attribute float aRotation;', 'uniform mat3 projectionMatrix;', + 'uniform vec4 uColor;', 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'void main(void){', ' vec2 v = aVertexPosition;', @@ -40,19 +41,18 @@ ' gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);', ' vTextureCoord = aTextureCoord;', - ' vColor = aColor;', + ' vColor = aColor * uColor;', '}', ].join('\n'), // hello [ 'varying vec2 vTextureCoord;', - 'varying float vColor;', + 'varying vec4 vColor;', 'uniform sampler2D uSampler;', - 'uniform float uAlpha;', 'void main(void){', - ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor * uAlpha;', + ' vec4 color = texture2D(uSampler, vTextureCoord) * vColor;', ' if (color.a == 0.0) discard;', ' gl_FragColor = color;', '}', diff --git a/src/prepare/BasePrepare.js b/src/prepare/BasePrepare.js index e45c4dc..3ca0774 100644 --- a/src/prepare/BasePrepare.js +++ b/src/prepare/BasePrepare.js @@ -434,12 +434,9 @@ { if (item instanceof core.TextStyle) { - const font = core.Text.getFontStyle(item); + const font = item.toFontString(); - if (!core.Text.fontPropertiesCache[font]) - { - core.Text.calculateFontProperties(font); - } + core.TextMetrics.measureFont(font); return true; } diff --git a/test/core/Application.js b/test/core/Application.js index aa726b0..6d89c36 100644 --- a/test/core/Application.js +++ b/test/core/Application.js @@ -17,4 +17,35 @@ done(); }); }); + + it('should remove canvas when destroyed', function (done) + { + const app = new PIXI.Application(); + const view = app.view; + + expect(view).to.be.instanceof(HTMLCanvasElement); + document.body.appendChild(view); + + app.ticker.addOnce(() => + { + expect(document.body.contains(view)).to.be.true; + app.destroy(true); + expect(document.body.contains(view)).to.be.false; + done(); + }); + }); + + it('should not start application before calling start method if options.autoStart is false', function (done) + { + const app = new PIXI.Application({ autoStart: false }); + + expect(app.ticker.started).to.be.false; + app.start(); + + app.ticker.addOnce(() => + { + app.destroy(); + done(); + }); + }); }); diff --git a/test/core/BaseTexture.js b/test/core/BaseTexture.js index 719ed64..fe3c635 100644 --- a/test/core/BaseTexture.js +++ b/test/core/BaseTexture.js @@ -103,4 +103,21 @@ expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.BaseTextureCache[NAME2]).to.equal(baseTexture); }); + + it('should not throw an error destroying a destroyed BaseTexture', function () + { + const baseTexture = new PIXI.BaseTexture(); + + baseTexture.destroy(); + baseTexture.destroy(); + }); + + it('should set source.crossOrigin to anonymous if explicitly set', function () + { + cleanCache(); + + const baseTexture = PIXI.BaseTexture.fromImage(URL, true); + + expect(baseTexture.source.crossOrigin).to.equal('anonymous'); + }); }); diff --git a/test/core/CanvasRenderer.js b/test/core/CanvasRenderer.js new file mode 100644 index 0000000..7ebf633 --- /dev/null +++ b/test/core/CanvasRenderer.js @@ -0,0 +1,32 @@ +'use strict'; + +describe('PIXI.CanvasRenderer', function () +{ + it('should default context to rootContext', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + expect(renderer.context).to.equal(renderer.rootContext); + } + finally + { + renderer.destroy(); + } + }); + + it('should allow clear() to work despite no containers added to the renderer', function () + { + const renderer = new PIXI.CanvasRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + }); +}); diff --git a/test/core/Graphics.js b/test/core/Graphics.js index a3d2a4c..d0b3f66 100644 --- a/test/core/Graphics.js +++ b/test/core/Graphics.js @@ -140,6 +140,28 @@ expect(graphics.containsPoint(point)).to.be.false; }); + + it('should return false with hole', function () + { + const point1 = new PIXI.Point(1, 1); + const point2 = new PIXI.Point(5, 5); + const graphics = new PIXI.Graphics(); + + graphics.beginFill(0) + .moveTo(0, 0) + .lineTo(10, 0) + .lineTo(10, 10) + .lineTo(0, 10) + // draw hole + .moveTo(2, 2) + .lineTo(8, 2) + .lineTo(8, 8) + .lineTo(2, 8) + .addHole(); + + expect(graphics.containsPoint(point1)).to.be.true; + expect(graphics.containsPoint(point2)).to.be.false; + }); }); describe('arc', function () diff --git a/test/core/Rectangle.js b/test/core/Rectangle.js index 40ca3b0..3bd6f13 100644 --- a/test/core/Rectangle.js +++ b/test/core/Rectangle.js @@ -12,6 +12,16 @@ expect(rect.bottom).to.equal(6); }); + it('should cast quantities to number types', function () + { + const rect = new PIXI.Rectangle('5', '5', '1', '1'); + + expect(rect.left).to.equal(5); + expect(rect.top).to.equal(5); + expect(rect.right).to.equal(6); + expect(rect.bottom).to.equal(6); + }); + it('should clone a new rectangle', function () { const rect1 = new PIXI.Rectangle(10, 10, 10, 10); @@ -135,7 +145,7 @@ it('should fit a rectangle', function () { - const rect1 = new PIXI.Rectangle(0, 0, -10, -10); + const rect1 = new PIXI.Rectangle(0, 0, 10, 10); const rect2 = new PIXI.Rectangle(-10, -10, 5, 5); rect2.fit(rect1); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index b14419d..c9bc4cb 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -91,11 +91,26 @@ describe('containsPoint', function () { + const texture = new PIXI.RenderTexture.create(20, 30); + const sprite = new PIXI.Sprite(texture); + it('should return true when point inside', function () { const point = new PIXI.Point(10, 10); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on left edge', function () + { + const point = new PIXI.Point(0, 15); + + expect(sprite.containsPoint(point)).to.be.true; + }); + + it('should return true when point on top edge', function () + { + const point = new PIXI.Point(10, 0); expect(sprite.containsPoint(point)).to.be.true; }); @@ -103,8 +118,6 @@ it('should return false when point outside', function () { const point = new PIXI.Point(100, 100); - const texture = new PIXI.RenderTexture.create(20, 30); - const sprite = new PIXI.Sprite(texture); expect(sprite.containsPoint(point)).to.be.false; }); diff --git a/test/core/Spritesheet.js b/test/core/Spritesheet.js index 7a3d6ac..dccde04 100644 --- a/test/core/Spritesheet.js +++ b/test/core/Spritesheet.js @@ -12,12 +12,14 @@ spritesheet.parse(function (textures) { const id = 'goldmine_10_5.png'; + const width = Math.floor(spritesheet.data.frames[id].frame.w * spritesheet.baseTexture.sourceScale); + const height = Math.floor(spritesheet.data.frames[id].frame.h * spritesheet.baseTexture.sourceScale); expect(Object.keys(textures).length).to.equal(1); expect(Object.keys(spritesheet.textures).length).to.equal(1); expect(textures[id]).to.be.an.instanceof(PIXI.Texture); - expect(textures[id].width).to.equal(spritesheet.data.frames[id].frame.w / spritesheet.resolution); - expect(textures[id].height).to.equal(spritesheet.data.frames[id].frame.h / spritesheet.resolution); + expect(textures[id].width).to.equal(width / spritesheet.resolution); + expect(textures[id].height).to.equal(height / spritesheet.resolution); expect(textures[id].textureCacheIds.indexOf(id)).to.equal(0); spritesheet.destroy(true); expect(spritesheet.textures).to.be.null; @@ -68,6 +70,19 @@ }; }); + it('should create instance with BaseTexture source scale', function (done) + { + const data = require(path.resolve(this.resources, 'building1.json')); // eslint-disable-line global-require + const baseTexture = new PIXI.BaseTexture.fromImage(data.meta.image, undefined, undefined, 1.5); + const spritesheet = new PIXI.Spritesheet(baseTexture, data); + + expect(data).to.be.an.object; + expect(data.meta.image).to.equal('building1.png'); + expect(spritesheet.resolution).to.equal(0.5); + + this.validate(spritesheet, done); + }); + it('should create instance with filename resolution', function (done) { const uri = path.resolve(this.resources, 'building1@2x.json'); diff --git a/test/core/Texture.js b/test/core/Texture.js index 4e5933d..fa5c335 100644 --- a/test/core/Texture.js +++ b/test/core/Texture.js @@ -70,26 +70,6 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); }); - it('should be added to the texture cache correctly using legacy addTextureToCache, ' - + 'and should remove also remove the base texture from its cache with removeTextureFromCache', function () - { - cleanCache(); - - const texture = new PIXI.Texture(new PIXI.BaseTexture()); - - PIXI.BaseTexture.addToCache(texture.baseTexture, NAME); - PIXI.Texture.addTextureToCache(texture, NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(texture.baseTexture); - expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); - PIXI.Texture.removeTextureFromCache(NAME); - expect(texture.baseTexture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); - expect(PIXI.utils.BaseTextureCache[NAME]).to.equal(undefined); - expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); - }); - it('should remove Texture from entire cache using removeFromCache (by Texture instance)', function () { cleanCache(); @@ -127,4 +107,31 @@ expect(PIXI.utils.TextureCache[NAME]).to.equal(undefined); expect(PIXI.utils.TextureCache[NAME2]).to.equal(texture); }); + + it('should not remove Texture from cache if Texture instance has been replaced', function () + { + cleanCache(); + + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + const texture2 = new PIXI.Texture(new PIXI.BaseTexture()); + + PIXI.Texture.addToCache(texture, NAME); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture); + PIXI.Texture.addToCache(texture2, NAME); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + PIXI.Texture.removeFromCache(texture); + expect(texture.textureCacheIds.indexOf(NAME)).to.equal(-1); + expect(texture2.textureCacheIds.indexOf(NAME)).to.equal(0); + expect(PIXI.utils.TextureCache[NAME]).to.equal(texture2); + }); + + it('destroying a destroyed texture should not throw an error', function () + { + const texture = new PIXI.Texture(new PIXI.BaseTexture()); + + texture.destroy(true); + texture.destroy(true); + }); }); diff --git a/test/core/Ticker.js b/test/core/Ticker.js index 188770f..7154220 100644 --- a/test/core/Ticker.js +++ b/test/core/Ticker.js @@ -150,6 +150,56 @@ expect(this.length()).to.equal(length); }); + it('should call when adding same priority', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1) + .add(listener2) + .add(listener3); + + shared.update(); + + expect(this.length()).to.equal(length + 3); + + sinon.assert.callOrder(listener1, listener2, listener3); + + shared.remove(listener1) + .remove(listener2) + .remove(listener3); + + expect(this.length()).to.equal(length); + }); + + it('should remove once listener in a stack', function () + { + const length = this.length(); + const listener1 = sinon.spy(); + const listener2 = sinon.spy(); + const listener3 = sinon.spy(); + + shared.add(listener1, null, PIXI.UPDATE_PRIORITY.HIGH); + shared.addOnce(listener2, null, PIXI.UPDATE_PRIORITY.NORMAL); + shared.add(listener3, null, PIXI.UPDATE_PRIORITY.LOW); + + shared.update(); + + expect(this.length()).to.equal(length + 2); + + shared.update(); + + expect(listener1.calledTwice).to.be.true; + expect(listener2.calledOnce).to.be.true; + expect(listener3.calledTwice).to.be.true; + + shared.remove(listener1).remove(listener3); + + expect(this.length()).to.equal(length); + }); + it('should call inserted item with a lower priority', function () { const length = this.length(); diff --git a/test/core/TilingSprite.js b/test/core/TilingSprite.js index 7694792..0b6c87f 100644 --- a/test/core/TilingSprite.js +++ b/test/core/TilingSprite.js @@ -30,7 +30,9 @@ const texture = new PIXI.Texture(new PIXI.BaseTexture()); const tilingSprite = new PIXI.extras.TilingSprite(texture, 200, 300); - expect(tilingSprite.containsPoint(new PIXI.Point(1, 1))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(0, 0))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(10, 10))).to.equal(true); + expect(tilingSprite.containsPoint(new PIXI.Point(200, 300))).to.equal(false); expect(tilingSprite.containsPoint(new PIXI.Point(300, 400))).to.equal(false); }); diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js index a5bf69d..dd1c6d8 100644 --- a/test/core/WebGLRenderer.js +++ b/test/core/WebGLRenderer.js @@ -18,4 +18,18 @@ renderer.destroy(); } })); + + it('should allow clear() to work despite no containers added to the renderer', withGL(function () + { + const renderer = new PIXI.WebGLRenderer(1, 1); + + try + { + renderer.clear(); + } + finally + { + renderer.destroy(); + } + })); }); diff --git a/test/core/index.js b/test/core/index.js index 28636ab..2138e7b 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -25,6 +25,7 @@ require('./Circle'); require('./Graphics'); require('./SpriteRenderer'); +require('./CanvasRenderer'); require('./WebGLRenderer'); require('./Ellipse'); require('./BaseTexture'); diff --git a/test/core/util.js b/test/core/util.js index 239aaeb..68c7e6d 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -280,39 +280,9 @@ describe('.removeItems', function () { - var arr; - - beforeEach(() => + it('should exist', function () { - arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; - }); - - it('should return if the start index is greater than or equal to the length of the array', function () - { - PIXI.utils.removeItems(arr, arr.length + 1, 5); - expect(arr.length).to.be.equal(10); - }); - - it('should return if the remove count is 0', function () - { - PIXI.utils.removeItems(arr, 2, 0); - expect(arr.length).to.be.equal(10); - }); - - it('should remove the number of elements specified from the array, starting from the start index', function () - { - const res = [1, 2, 3, 8, 9, 10]; - - PIXI.utils.removeItems(arr, 3, 4); - expect(arr).to.be.deep.equal(res); - }); - - it('should remove other elements if delete count is > than the number of elements after start index', function () - { - const res = [1, 2, 3, 4, 5, 6, 7]; - - PIXI.utils.removeItems(arr, 7, 10); - expect(arr).to.be.deep.equal(res); + expect(PIXI.utils.removeItems).to.be.a('function'); }); }); diff --git a/test/interaction/InteractionManager.js b/test/interaction/InteractionManager.js index 31385b9..3f84d6a 100644 --- a/test/interaction/InteractionManager.js +++ b/test/interaction/InteractionManager.js @@ -71,6 +71,25 @@ expect(eventSpy).to.have.been.called; }); + it('should call mouseupoutside handler on mouseup on different elements', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mouseupoutside', eventSpy); + + pointer.mousedown(10, 10); + pointer.mouseup(10, 10, false); + + expect(eventSpy).to.have.been.called; + }); + it('should call mouseover handler', function () { const stage = new PIXI.Container(); @@ -109,6 +128,95 @@ }); }); + describe('touch vs pointer', function () + { + it('should call touchstart and pointerdown when touch event and pointer supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10); + + expect(touchSpy).to.have.been.calledOnce; + expect(pointerSpy).to.have.been.calledOnce; + }); + + it('should not call touchstart or pointerdown when pointer event and touch supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10, 0, true); + + expect(touchSpy).to.not.have.been.called; + expect(pointerSpy).to.not.have.been.called; + }); + + it('should call touchstart and pointerdown when touch event and pointer not supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, false); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10); + + expect(touchSpy).to.have.been.calledOnce; + expect(pointerSpy).to.have.been.calledOnce; + }); + + it('should call touchstart and pointerdown when pointer event and touch not supported', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const touchSpy = sinon.spy(function touchListen() { /* noop */ }); + const pointerSpy = sinon.spy(function pointerListen() { /* noop */ }); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + pointer.interaction.supportsTouchEvents = false; + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('touchstart', touchSpy); + graphics.on('pointerdown', pointerSpy); + + pointer.touchstart(10, 10, 0, true); + + expect(touchSpy).to.have.been.calledOnce; + expect(pointerSpy).to.have.been.calledOnce; + }); + }); + describe('add/remove events', function () { let stub; @@ -264,7 +372,7 @@ expect(element.removeEventListener).to.have.been.calledWith('mouseover'); }); - it('should add and remove touch events to element', function () + it('should add and remove touch events to element without pointer events', function () { const manager = new PIXI.interaction.InteractionManager(sinon.stub()); const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() }; @@ -287,6 +395,30 @@ expect(element.removeEventListener).to.have.been.calledWith('touchend'); expect(element.removeEventListener).to.have.been.calledWith('touchmove'); }); + + it('should add and remove touch events to element with pointer events', function () + { + const manager = new PIXI.interaction.InteractionManager(sinon.stub()); + const element = { style: {}, addEventListener: sinon.stub(), removeEventListener: sinon.stub() }; + + manager.interactionDOMElement = element; + manager.supportsPointerEvents = true; + manager.supportsTouchEvents = true; + + manager.addEvents(); + + expect(element.addEventListener).to.have.been.calledWith('touchstart'); + expect(element.addEventListener).to.have.been.calledWith('touchcancel'); + expect(element.addEventListener).to.have.been.calledWith('touchend'); + expect(element.addEventListener).to.have.been.calledWith('touchmove'); + + manager.removeEvents(); + + expect(element.removeEventListener).to.have.been.calledWith('touchstart'); + expect(element.removeEventListener).to.have.been.calledWith('touchcancel'); + expect(element.removeEventListener).to.have.been.calledWith('touchend'); + expect(element.removeEventListener).to.have.been.calledWith('touchmove'); + }); }); describe('onClick', function () @@ -1062,7 +1194,7 @@ expect(pointer.renderer.view.style.display).to.equal('none'); }); - it('should not change cursor style if no cursor style provided', function () + it('should not change cursor style if null cursor style provided', function () { const stage = new PIXI.Container(); const graphics = new PIXI.Graphics(); @@ -1082,6 +1214,22 @@ pointer.mousemove(60, 60); expect(pointer.renderer.view.style.cursor).to.equal(''); }); + + it('should use cursor property as css if no style entry', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const pointer = this.pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.cursor = 'text'; + + pointer.mousemove(10, 10); + expect(pointer.renderer.view.style.cursor).to.equal('text'); + }); }); describe('recursive hitTesting', function () @@ -1279,4 +1427,91 @@ expect(hit).to.equal(behind); }); }); + + describe('InteractionData properties', function () + { + it('isPrimary should be set for first touch only', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const pointer = this.pointer = new MockPointer(stage); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + + pointer.touchstart(10, 10, 1); + expect(pointer.interaction.activeInteractionData[1]).to.exist; + expect(pointer.interaction.activeInteractionData[1].isPrimary, + 'first touch should be primary on touch start').to.be.true; + pointer.touchstart(13, 9, 2); + expect(pointer.interaction.activeInteractionData[2].isPrimary, + 'second touch should not be primary').to.be.false; + pointer.touchmove(10, 20, 1); + expect(pointer.interaction.activeInteractionData[1].isPrimary, + 'first touch should still be primary after move').to.be.true; + pointer.touchend(10, 10, 1); + pointer.touchmove(13, 29, 2); + expect(pointer.interaction.activeInteractionData[2].isPrimary, + 'second touch should still not be primary after first is done').to.be.false; + }); + }); + + describe('mouse events from pens', function () + { + it('should call mousedown handler', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mousedown', eventSpy); + + pointer.pendown(10, 10); + + expect(eventSpy).to.have.been.calledOnce; + }); + + it('should call mousemove handler', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mousemove', eventSpy); + + pointer.penmove(10, 10); + + expect(eventSpy).to.have.been.calledOnce; + }); + + it('should call mouseup handler', function () + { + const stage = new PIXI.Container(); + const graphics = new PIXI.Graphics(); + const eventSpy = sinon.spy(); + const pointer = this.pointer = new MockPointer(stage, null, null, true); + + stage.addChild(graphics); + graphics.beginFill(0xFFFFFF); + graphics.drawRect(0, 0, 50, 50); + graphics.interactive = true; + graphics.on('mouseup', eventSpy); + + pointer.penup(10, 10); + + expect(eventSpy).to.have.been.calledOnce; + }); + }); }); diff --git a/test/interaction/MockPointer.js b/test/interaction/MockPointer.js index c9c6228..80eb76a 100644 --- a/test/interaction/MockPointer.js +++ b/test/interaction/MockPointer.js @@ -30,6 +30,7 @@ this.createdPointerEvent = true; } + this.activeTouches = []; this.stage = stage; this.renderer = new PIXI.CanvasRenderer(width || 100, height || 100); this.renderer.sayHello = () => { /* empty */ }; @@ -73,34 +74,110 @@ } /** + * [createEvent description] + * @param {string} eventType `type` of event + * @param {number} x pointer x position + * @param {number} y pointer y position + * @param {number} [identifier] pointer id for touch events + * @param {boolean} [asPointer] If it should be a PointerEvent from a mouse or touch + * @param {boolean} [onCanvas=true] If the event should be on the canvas (as opposed to a different element) + * @return {Event} Generated MouseEvent, TouchEvent, or PointerEvent + */ + createEvent(eventType, x, y, identifier, asPointer, onCanvas = true) + { + let event; + + if (eventType.startsWith('mouse')) + { + if (asPointer) + { + event = new PointerEvent(eventType.replace('mouse', 'pointer'), { + pointerType: 'mouse', + clientX: x, + clientY: y, + preventDefault: sinon.stub(), + }); + } + else + { + event = new MouseEvent(eventType, { + clientX: x, + clientY: y, + preventDefault: sinon.stub(), + }); + } + if (onCanvas) + { + Object.defineProperty(event, 'target', { value: this.renderer.view }); + } + } + else if (eventType.startsWith('touch')) + { + if (asPointer) + { + eventType = eventType.replace('touch', 'pointer').replace('start', 'down').replace('end', 'up'); + event = new PointerEvent(eventType, { + pointerType: 'touch', + pointerId: identifier || 0, + clientX: x, + clientY: y, + preventDefault: sinon.stub(), + }); + Object.defineProperty(event, 'target', { value: this.renderer.view }); + } + else + { + const touch = new Touch({ identifier: identifier || 0, target: this.renderer.view }); + + if (eventType.endsWith('start')) + { + this.activeTouches.push(touch); + } + else if (eventType.endsWith('end') || eventType.endsWith('leave')) + { + for (let i = 0; i < this.activeTouches.length; ++i) + { + if (this.activeTouches[i].identifier === touch.identifier) + { + this.activeTouches.splice(i, 1); + break; + } + } + } + event = new TouchEvent(eventType, { + preventDefault: sinon.stub(), + changedTouches: [touch], + touches: this.activeTouches, + }); + + Object.defineProperty(event, 'target', { value: this.renderer.view }); + } + } + else + { + event = new PointerEvent(eventType, { + pointerType: 'pen', + pointerId: identifier || 0, + clientX: x, + clientY: y, + preventDefault: sinon.stub(), + }); + Object.defineProperty(event, 'target', { value: this.renderer.view }); + } + + this.setPosition(x, y); + this.render(); + + return event; + } + + /** * @param {number} x - pointer x position * @param {number} y - pointer y position * @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse */ mousemove(x, y, asPointer) { - let mouseEvent; - - if (asPointer) - { - mouseEvent = new PointerEvent('pointermove', { - pointerType: 'mouse', - clientX: x, - clientY: y, - preventDefault: sinon.stub(), - }); - } - else - { - mouseEvent = new MouseEvent('mousemove', { - clientX: x, - clientY: y, - preventDefault: sinon.stub(), - }); - } - - this.setPosition(x, y); - this.render(); // mouseOverRenderer state should be correct, so mouse position to view rect const rect = new PIXI.Rectangle(0, 0, this.renderer.width, this.renderer.height); @@ -108,66 +185,102 @@ { if (!this.interaction.mouseOverRenderer) { - this.interaction.onPointerOver(new MouseEvent('mouseover', { - clientX: x, - clientY: y, - preventDefault: sinon.stub(), - })); + this.interaction.onPointerOver(this.createEvent('mouseover', x, y, null, asPointer)); } - this.interaction.onPointerMove(mouseEvent); + this.interaction.onPointerMove(this.createEvent('mousemove', x, y, null, asPointer)); } else { - this.interaction.onPointerOut(new MouseEvent('mouseout', { - clientX: x, - clientY: y, - preventDefault: sinon.stub(), - })); + this.interaction.onPointerOut(this.createEvent('mouseout', x, y, null, asPointer)); } } /** * @param {number} x - pointer x position * @param {number} y - pointer y position + * @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse */ - click(x, y) + click(x, y, asPointer) { - this.mousedown(x, y); - this.mouseup(x, y); + this.mousedown(x, y, asPointer); + this.mouseup(x, y, asPointer); } /** * @param {number} x - pointer x position * @param {number} y - pointer y position + * @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse */ - mousedown(x, y) + mousedown(x, y, asPointer) { - const mouseEvent = new MouseEvent('mousedown', { - clientX: x, - clientY: y, - preventDefault: sinon.stub(), - }); - - this.setPosition(x, y); - this.render(); - this.interaction.onPointerDown(mouseEvent); + this.interaction.onPointerDown(this.createEvent('mousedown', x, y, null, asPointer)); } /** * @param {number} x - pointer x position * @param {number} y - pointer y position + * @param {boolean} [onCanvas=true] - if the event happend on the Canvas element or not + * @param {boolean} [asPointer] - if it should be a PointerEvent from a mouse */ - mouseup(x, y) + mouseup(x, y, onCanvas = true, asPointer = false) { - const mouseEvent = new MouseEvent('mouseup', { - clientX: x, - clientY: y, - preventDefault: sinon.stub(), - }); + this.interaction.onPointerUp(this.createEvent('mouseup', x, y, null, asPointer, onCanvas)); + } - this.setPosition(x, y); - this.render(); - this.interaction.onPointerUp(mouseEvent); + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + * @param {number} [identifier] - pointer id + * @param {boolean} [asPointer] - if it should be a PointerEvent from a touch + */ + tap(x, y, identifier, asPointer) + { + this.touchstart(x, y, identifier, asPointer); + this.touchend(x, y, identifier, asPointer); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + * @param {number} [identifier] - pointer id + * @param {boolean} [asPointer] - if it should be a PointerEvent from a touch + */ + touchstart(x, y, identifier, asPointer) + { + this.interaction.onPointerDown(this.createEvent('touchstart', x, y, identifier, asPointer)); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + * @param {number} [identifier] - pointer id + * @param {boolean} [asPointer] - if it should be a PointerEvent from a touch + */ + touchmove(x, y, identifier, asPointer) + { + this.interaction.onPointerMove(this.createEvent('touchmove', x, y, identifier, asPointer)); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + * @param {number} [identifier] - pointer id + * @param {boolean} [asPointer] - if it should be a PointerEvent from a touch + */ + touchend(x, y, identifier, asPointer) + { + this.interaction.onPointerUp(this.createEvent('touchend', x, y, identifier, asPointer)); + } + + /** + * @param {number} x - pointer x position + * @param {number} y - pointer y position + * @param {number} [identifier] - pointer id + * @param {boolean} [asPointer] - if it should be a PointerEvent from a touch + */ + touchleave(x, y, identifier, asPointer) + { + this.interaction.onPointerOut(this.createEvent('touchleave', x, y, identifier, asPointer)); } /** @@ -175,10 +288,9 @@ * @param {number} y - pointer y position * @param {number} [identifier] - pointer id */ - tap(x, y, identifier) + pendown(x, y, identifier) { - this.touchstart(x, y, identifier); - this.touchend(x, y, identifier); + this.interaction.onPointerDown(this.createEvent('pointerdown', x, y, identifier, true)); } /** @@ -186,18 +298,9 @@ * @param {number} y - pointer y position * @param {number} [identifier] - pointer id */ - touchstart(x, y, identifier) + penmove(x, y, identifier) { - const touchEvent = new TouchEvent('touchstart', { - preventDefault: sinon.stub(), - changedTouches: [ - new Touch({ identifier: identifier || 0, target: this.renderer.view }), - ], - }); - - this.setPosition(x, y); - this.render(); - this.interaction.onPointerDown(touchEvent); + this.interaction.onPointerMove(this.createEvent('pointermove', x, y, identifier, true)); } /** @@ -205,37 +308,9 @@ * @param {number} y - pointer y position * @param {number} [identifier] - pointer id */ - touchend(x, y, identifier) + penup(x, y, identifier) { - const touchEvent = new TouchEvent('touchend', { - preventDefault: sinon.stub(), - changedTouches: [ - new Touch({ identifier: identifier || 0, target: this.renderer.view }), - ], - }); - - this.setPosition(x, y); - this.render(); - this.interaction.onPointerUp(touchEvent); - } - - /** - * @param {number} x - pointer x position - * @param {number} y - pointer y position - * @param {number} [identifier] - pointer id - */ - touchleave(x, y, identifier) - { - const touchEvent = new TouchEvent('touchleave', { - preventDefault: sinon.stub(), - changedTouches: [ - new Touch({ identifier: identifier || 0, target: this.renderer.view }), - ], - }); - - this.setPosition(x, y); - this.render(); - this.interaction.onPointerOut(touchEvent); + this.interaction.onPointerUp(this.createEvent('pointerup', x, y, identifier, true)); } }